(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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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 2eff18ce8d..46429c93db 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n "},"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 f5fb30f9c5..9f6157dfb3 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n\n \n
\n "},"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 3e33bd6451..83b09aafcf 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n\n \n
\n "},"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 042610f148..3fcb50b0b1 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n\n \n
\n "},"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 6fe7bdc8e7..796dd21eca 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleReadOnlyGrid\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#exampleReadOnlyGrid\");","/src/App.vue":"\n\n\n \n
\n "},"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 1ceaed011a..289d6df082 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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: ` \n
\n
\n
\n {{ selectedLabel }} \n \n
\n
\n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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: ` \n
\n
\n
\n {{ selectedLabel }} \n \n
\n
\n
`,\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 e89c79ead9..ae98bcd669 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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: ` \n
\n Get data \n
\n @if (output) {\n
{{ output }} \n }\n
\n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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: ` \n
\n Get data \n
\n @if (output) {\n
{{ output }} \n }\n
\n
`,\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 8a50d02c4d..2453fb5427 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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: ` \n
\n \n Click to modify the selected cells\n \n
\n
\n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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: ` \n
\n \n Click to modify the selected cells\n \n
\n
\n
`,\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 da1da8e6ac..1c98644488 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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: `\n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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: `\n
`,\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 e9f5e7e0e7..a0c23b3a09 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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 \n
\n Select cell B2 \n Select range B2:D4 \n Deselect \n
\n
\n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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 \n
\n Select cell B2 \n Select range B2:D4 \n Deselect \n
\n
\n
`,\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 6e692cc357..4b82de73d6 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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: ` \n \n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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: ` \n \n
`,\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 701b21fff8..c62e843686 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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 \n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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 \n
`,\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 661b0dd67e..e4edc5f338 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-963c44a-20261021","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-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n
\n
\n Multiple ranges selection \n \n \n
\n
\n
\n \n\n","/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-36242d6-20261027","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-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n
\n
\n Multiple ranges selection \n \n \n
\n
\n
\n \n\n","/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 b2c36e2d99..84f884ed8f 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-963c44a-20261021","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-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n
\n
\n Multiple ranges selection \n \n \n
\n
\n
\n \n\n","/index.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-36242d6-20261027","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-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n
\n
\n Multiple ranges selection \n \n \n
\n
\n
\n \n\n","/index.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 5c59bae85b..c458fa4938 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n Get data \n
\n
Here you will see the log \n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n Get data \n
\n
Here you will see the log \n
\n \n\n","/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 1a45f554c1..b43a42d1fb 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n Get data \n
\n
Here you will see the log \n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n Get data \n
\n
Here you will see the log \n
\n \n\n","/index.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 b2818160ae..b607fe43b7 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-963c44a-20261021","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-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n Click to modify the selected cells \n
\n
\n \n\n","/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-36242d6-20261027","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-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n Click to modify the selected cells \n
\n
\n \n\n","/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 f6f3d6cf34..52fd33675f 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-963c44a-20261021","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-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n Click to modify the selected cells \n
\n
\n \n\n","/index.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-36242d6-20261027","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-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n Click to modify the selected cells \n
\n
\n \n\n","/index.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 2c9004d59b..4bac0de636 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-963c44a-20261021","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-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","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-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 df11750b3f..ece148eb34 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-963c44a-20261021","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-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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-36242d6-20261027","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-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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 e0cd6390af..2ea5d5d371 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n Select cell B2 \n Select range B2:D4 \n Deselect \n
\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n Select cell B2 \n Select range B2:D4 \n Deselect \n
\n
\n \n\n","/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 65cc95f1de..0945a16b41 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n Select cell B2 \n Select range B2:D4 \n Deselect \n
\n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n Select cell B2 \n Select range B2:D4 \n Deselect \n
\n
\n \n\n","/index.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 75352900cc..efcc7128cc 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n \n\n","/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 a497b96b7a..21e374ca25 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n \n\n","/index.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('#auto-wrap-row')!;\nconst autoWrapColCheckbox = document.querySelector('#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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n \n\n","/index.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('#auto-wrap-row')!;\nconst autoWrapColCheckbox = document.querySelector('#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 6ac7c69a19..06eb9d6dcf 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 bff8b0a9c2..df122eb9a8 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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 81ebec173f..2bf92ad1bc 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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(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 \n
\n
\n
setIsOpen(!isOpen)}\n >\n {selectedLabel} \n \n {options.map((opt) => (\n handleSelect(opt.value)}\n >\n {opt.label}\n \n ))}\n \n )}\n \n
\n
Handsontable React Example \n \n\n\n
\n \n\n","/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(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 \n
\n
\n
setIsOpen(!isOpen)}\n >\n {selectedLabel} \n \n {options.map((opt) => (\n handleSelect(opt.value)}\n >\n {opt.label}\n \n ))}\n \n )}\n \n
\n
Handsontable React Example \n \n\n\n
\n \n\n","/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(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 \n
\n getButtonClickCallback()}>\n Get data\n \n
\n
\n {output}\n \n
Handsontable React Example \n \n\n\n
\n \n\n","/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(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 \n
\n getButtonClickCallback()}>\n Get data\n \n
\n
\n {output}\n \n
Handsontable React Example \n \n\n\n
\n \n\n","/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(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 \n
\n buttonClickCallback()}>\n Click to modify the selected cells\n \n
\n
Handsontable React Example \n \n\n\n
\n \n\n","/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(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 \n
\n buttonClickCallback()}>\n Click to modify the selected cells\n \n
\n
Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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(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 \n
\n Select cell B2 \n Select range B2:D4 \n Deselect \n
\n
Handsontable React Example \n \n\n\n
\n \n\n","/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(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 \n
\n Select cell B2 \n Select range B2:D4 \n Deselect \n
\n
Handsontable React Example \n \n\n\n
\n \n\n","/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(null);\n const [autoWrapRow, setAutoWrapRow] = useState(true);\n const [autoWrapCol, setAutoWrapCol] = useState(true);\n\n return (\n <>\n \n Handsontable React Example \n \n\n\n
\n \n\n","/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(null);\n const [autoWrapRow, setAutoWrapRow] = useState(true);\n const [autoWrapCol, setAutoWrapCol] = useState(true);\n\n return (\n <>\n \n Handsontable React Example \n \n\n\n
\n \n\n","/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(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 Handsontable React Example \n \n\n\n
\n \n\n","/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(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 Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n
\n
\n
\n {{ selectedLabel }} \n \n \n
\n
\n
\n
"},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n
\n
\n
\n {{ selectedLabel }} \n \n \n
\n
\n
\n
"},"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 9072d32c2b..ff6934e90b 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n
\n \n Get data\n \n
\n
{{ output }} \n
\n
\n
"},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n
\n \n Get data\n \n
\n
{{ output }} \n
\n
\n
"},"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 884ba820f3..c7914974d7 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n\n \n
\n
\n \n Click to modify the selected cells\n \n
\n
\n
\n
\n\n"},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n\n \n
\n
\n \n Click to modify the selected cells\n \n
\n
\n
\n
\n\n"},"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 0ec51b8271..febd510648 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n\n \n
\n \n\n"},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n\n \n
\n \n\n"},"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 fbb9c5f6a5..ddc8840a44 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n\n \n
\n
\n \n Select cell B2\n \n \n Select range B2:D4\n \n \n Deselect\n \n
\n
\n
\n
"},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n\n \n
\n
\n \n Select cell B2\n \n \n Select range B2:D4\n \n \n Deselect\n \n
\n
\n
\n
"},"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 0806e7b0ba..439fa705ef 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"\n\n\n \n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"\n\n\n \n "},"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 ee3edf28ec..8ec4c7e492 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"\n\n\n \n
\n "},"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 a5663e750a..dffad2670e 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`,\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 24abb5511e..dcca9ff16b 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 8522e2708b..8554036edf 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 e1c435bc66..6fc67dfa76 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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 55eff7da25..f75a541983 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.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: `Upper \n Lower `,\n})\nexport class EditorComponent extends HotCellEditorComponent {\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: ` \n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.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: `Upper \n Lower `,\n})\nexport class EditorComponent extends HotCellEditorComponent {\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: ` \n
`,\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 9a4a8c58cb..4674f504b5 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(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: ` \n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(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: ` \n
`,\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 d38f022807..31a464e716 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(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: ` \n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(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: ` \n
`,\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 e0ff7e9604..8c23d1f052 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 d67eee5a3b..5e0a110333 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 e2dee8d3fd..ce0a36b040 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-963c44a-20261021","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-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 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-36242d6-20261027","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-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 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 715777fe18..9ef7ddd76f 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-963c44a-20261021","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-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 = 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 = {\n Low: '#22c55e',\n Medium: '#f59e0b',\n High: '#ef4444',\n Critical: '#7c3aed',\n};\n\nconst STATUS_COLORS: Record = {\n 'To Do': '#6b7280',\n 'In Progress': '#3b82f6',\n Review: '#f59e0b',\n Done: '#22c55e',\n};\n\nfunction badgeRenderer(colorMap: Record) {\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 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-36242d6-20261027","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-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 = 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 = {\n Low: '#22c55e',\n Medium: '#f59e0b',\n High: '#ef4444',\n Critical: '#7c3aed',\n};\n\nconst STATUS_COLORS: Record = {\n 'To Do': '#6b7280',\n 'In Progress': '#3b82f6',\n Review: '#f59e0b',\n Done: '#22c55e',\n};\n\nfunction badgeRenderer(colorMap: Record) {\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 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 643e7025d7..bbe367209f 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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(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 \n {buttonValue.toLowerCase()} \n {buttonValue.toUpperCase()} \n \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 \n Handsontable React Example \n \n\n\n
\n \n\n","/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(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 \n {buttonValue.toLowerCase()} \n {buttonValue.toUpperCase()} \n \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 \n Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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 63423e7fb6..4a9e49569a 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n \n\n"},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n \n\n"},"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 5c5bcec809..1869de30c4 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n Handsontable Angular Example \n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","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-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 9923181008..ca806220c1 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-963c44a-20261021","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-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","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-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 9303d54ffd..6a5ea0a40c 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-963c44a-20261021","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-963c44a-20261021\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n \n\n"},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n \n\n"},"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 cbac311d2d..10b1b44909 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n {\n}\n\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example1',\n template: `\n @if (hotSettings) {\n Professional JavaScript for Web Developers ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript .',\n cover:\n '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title:\n 'JavaScript: The Good Parts ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title:\n 'JavaScript: The Definitive Guide ',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript 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: 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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n {\n}\n\n\n@Component({\n standalone: true,\n imports: [HotTableModule],\n selector: 'app-example1',\n template: `\n @if (hotSettings) {\n Professional JavaScript for Web Developers ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript .',\n cover:\n '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title:\n 'JavaScript: The Good Parts ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title:\n 'JavaScript: The Definitive Guide ',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript 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: 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 599cdc7f63..89e2d86eba 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n \n\n \n \n `,\n})\nexport class AppComponent implements OnInit {\n @ViewChild('myCellTpl', { static: true }) myCellTpl!: TemplateRef;\n\n readonly hotData = [\n {\n title:\n 'Professional JavaScript for Web Developers ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript .',\n cover:\n '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title:\n 'JavaScript: The Good Parts ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title:\n 'JavaScript: The Definitive Guide ',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript 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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n \n\n \n \n `,\n})\nexport class AppComponent implements OnInit {\n @ViewChild('myCellTpl', { static: true }) myCellTpl!: TemplateRef;\n\n readonly hotData = [\n {\n title:\n 'Professional JavaScript for Web Developers ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript .',\n cover:\n '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title:\n 'JavaScript: The Good Parts ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title:\n 'JavaScript: The Definitive Guide ',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript 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 d16713a994..2c6ca496ce 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n {{value}} `,\n standalone: true,\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ColorRendererComponent extends HotCellRendererComponent 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 \n \n `,\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n title:\n 'Professional JavaScript for Web Developers ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript .',\n rate: 3\n },\n {\n title:\n 'JavaScript: The Good Parts ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n rate: 9\n },\n {\n title:\n 'JavaScript: The Definitive Guide ',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript 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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n {{value}} `,\n standalone: true,\n imports: [],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ColorRendererComponent extends HotCellRendererComponent 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 \n \n `,\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n title:\n 'Professional JavaScript for Web Developers ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript .',\n rate: 3\n },\n {\n title:\n 'JavaScript: The Good Parts ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n rate: 9\n },\n {\n title:\n 'JavaScript: The Definitive Guide ',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript 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 499c1acaf5..f6860bd6a5 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n Professional JavaScript for Web Developers ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript .',\n cover:\n '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title:\n 'JavaScript: The Good Parts ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title:\n 'JavaScript: The Definitive Guide ',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript 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: 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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n Professional JavaScript for Web Developers ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript .',\n cover:\n '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title:\n 'JavaScript: The Good Parts ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript.',\n cover: '/docs/img/examples/javascript-the-good-parts.jpg',\n },\n {\n title:\n 'JavaScript: The Definitive Guide ',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript 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: 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 df4d097a0b..f948445af2 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n Professional JavaScript for Web Developers ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript .',\n comments: 'I would rate it ★★★★☆',\n cover:\n '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title:\n 'JavaScript: The Good Parts ',\n description:\n 'This book provides a developer-level introduction along with more advanced 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 'JavaScript: The Definitive Guide ',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n comments:\n 'I\\'ve never actually read it, but the comments are highly positive .',\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, 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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n Professional JavaScript for Web Developers ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript .',\n comments: 'I would rate it ★★★★☆',\n cover:\n '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title:\n 'JavaScript: The Good Parts ',\n description:\n 'This book provides a developer-level introduction along with more advanced 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 'JavaScript: The Definitive Guide ',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n comments:\n 'I\\'ve never actually read it, but the comments are highly positive .',\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, 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 6e5a09b453..bc6534016a 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n @if (hotSettings) {\n );\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 ? 'Bold and Beautiful '\n : `Some Handsontable Angular Example \n \n @if (hotSettings) {\n );\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 ? 'Bold and Beautiful '\n : `Some Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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 \n
\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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 \n
\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 d063e5b838..6bf9dd9efe 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 'Professional JavaScript for Web Developers ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript .',\n comments: 'I would rate it ★★★★☆',\n cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title: 'JavaScript: The Good Parts ',\n description:\n 'This book provides a developer-level introduction along with more advanced 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: 'JavaScript: The Definitive Guide ',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n comments:\n 'I\\'ve never actually read it, but the comments are highly positive .',\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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 'Professional JavaScript for Web Developers ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript .',\n comments: 'I would rate it ★★★★☆',\n cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title: 'JavaScript: The Good Parts ',\n description:\n 'This book provides a developer-level introduction along with more advanced 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: 'JavaScript: The Definitive Guide ',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n comments:\n 'I\\'ve never actually read it, but the comments are highly positive .',\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 43df9e5ae1..ff227c0021 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 'Professional JavaScript for Web Developers ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript .',\n comments: 'I would rate it ★★★★☆',\n cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title: 'JavaScript: The Good Parts ',\n description:\n 'This book provides a developer-level introduction along with more advanced 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: 'JavaScript: The Definitive Guide ',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n comments:\n 'I\\'ve never actually read it, but the comments are highly positive .',\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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 'Professional JavaScript for Web Developers ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript .',\n comments: 'I would rate it ★★★★☆',\n cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title: 'JavaScript: The Good Parts ',\n description:\n 'This book provides a developer-level introduction along with more advanced 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: 'JavaScript: The Definitive Guide ',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n comments:\n 'I\\'ve never actually read it, but the comments are highly positive .',\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 eb0a1a4116..50cf5e51a5 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n \n\n","/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 ? 'Bold and Beautiful '\n : `Some Handsontable Example \n \n\n\n \n \n\n","/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 ? 'Bold and Beautiful '\n : `Some Handsontable Example \n \n\n\n \n \n\n","/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 ? 'Bold and Beautiful '\n : `Some Handsontable Example \n \n\n\n \n \n\n","/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 ? 'Bold and Beautiful '\n : `Some Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 b75ac9f3dc..00e2031977 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 269cedc9d6..3c60b492e2 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 \n Row: {props.row}, column: {props.col},\n {' '}\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 \n Handsontable React Example \n \n\n\n
\n \n\n","/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 \n Row: {props.row}, column: {props.col},\n {' '}\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 \n Handsontable React Example \n \n\n\n
\n \n\n","/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 {props.value}
;\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 \n \n
\n \n \n
\n
\n \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-36242d6-20261027","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-36242d6-20261027\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 {props.value}
;\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 \n \n
\n \n \n
\n
\n \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 4cf5c614a1..2f9c30af60 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 {\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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 {\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 e31a9c2aa8..8d1a3906e0 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 'Professional JavaScript for Web Developers ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript .',\n comments: 'I would rate it ★★★★☆',\n cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title: 'JavaScript: The Good Parts ',\n description:\n 'This book provides a developer-level introduction along with more advanced 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: 'JavaScript: The Definitive Guide ',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n comments:\n 'I\\'ve never actually read it, but the comments are highly positive .',\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 Handsontable React Example \n \n\n\n
\n \n\n","/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 'Professional JavaScript for Web Developers ',\n description:\n 'This book provides a developer-level introduction along with more advanced and useful features of JavaScript .',\n comments: 'I would rate it ★★★★☆',\n cover: '/docs/img/examples/professional-javascript-developers-nicholas-zakas.jpg',\n },\n {\n title: 'JavaScript: The Good Parts ',\n description:\n 'This book provides a developer-level introduction along with more advanced 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: 'JavaScript: The Definitive Guide ',\n description:\n 'JavaScript: The Definitive Guide provides a thorough description of the core JavaScript language and both the legacy and standard DOMs implemented in web browsers.',\n comments:\n 'I\\'ve never actually read it, but the comments are highly positive .',\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 Handsontable React Example \n \n\n\n
\n \n\n","/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(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 exampleContainerMouseupCallback(...args)}>\n Bold and Beautiful ';\n\n case 1:\n return `Some
\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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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(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 exampleContainerMouseupCallback(...args)}>\n Bold and Beautiful ';\n\n case 1:\n return `Some
\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 9f534bf04d..4c4a498844 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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 c3427a5c2e..476b2c5f6d 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n "},"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 04150e2b52..a20beda39d 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n\n \n
\n "},"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 f9fba953f1..5403d2cf90 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n\n \n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n\n \n "},"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 6ff53826e3..65ce4f023e 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"\n\n\n \n
\n "},"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 b8671ba052..6151b317cb 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n {{output}} \n\n \n \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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n {{output}} \n\n \n \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 9de9736bd3..da7b046367 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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 Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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 Handsontable Example \n \n\n\n Here you will see the log \n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n Here you will see the log \n
\n \n\n","/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 fa0ec9be50..caacb08d69 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n Here you will see the log \n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n Here you will see the log \n
\n \n\n","/index.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 27a3c07ad0..a86e140fdf 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 0fb333b989..7c0355365a 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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 905b480d76..ab2d1ea30e 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 \n \n {output}\n \n
\n = 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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 \n \n {output}\n \n
\n = 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 e84c98c39c..4b5cdeecd9 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n {{ output }} \n
\n
\n
"},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n {{ output }} \n
\n
\n
"},"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 977dae5264..00ce82a561 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n "},"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 c82448d723..92f70358cf 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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 aa26fdb6af..838e3931cd 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n "},"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 96104d8de1..0dfa78c982 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n\n \n
\n "},"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 c8dfede223..3fffa2cae2 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: ` \n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: ` \n
`,\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__example10.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example10.ts.json
index 6ec9962c91..846f3c6d7c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example10.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example10.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · Object 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype Airport = {\n name: string;\n city: string;\n country: string;\n};\n\n@Component({\n selector: 'example10-autocomplete-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n
`\n})\nexport class AppComponent {\n // each `value` is an object, so the cell stores the whole airport, not only its name\n readonly airports = [\n { key: 'LAX', value: { name: 'Los Angeles International Airport', city: 'Los Angeles', country: 'USA' } },\n { key: 'JFK', value: { name: 'John F. Kennedy International Airport', city: 'New York', country: 'USA' } },\n { key: 'LHR', value: { name: 'London Heathrow Airport', city: 'London', country: 'United Kingdom' } },\n { key: 'CDG', value: { name: 'Charles de Gaulle Airport', city: 'Paris', country: 'France' } },\n { key: 'HND', value: { name: 'Tokyo Haneda Airport', city: 'Tokyo', country: 'Japan' } },\n { key: 'SIN', value: { name: 'Singapore Changi Airport', city: 'Singapore', country: 'Singapore' } },\n ];\n\n readonly shipments = [\n ['Electronics and Gadgets', this.airports[0]],\n ['Medical Supplies', this.airports[1]],\n ['Fresh Produce', this.airports[2]],\n ['Textiles', this.airports[3]],\n ['Pharmaceuticals', this.airports[4]],\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.airports,\n // display the city and the name of each airport\n sourceLabel: (airport: Airport) => `${airport.city} - ${airport.name}`,\n title: 'Destination airport',\n width: 400,\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/example10.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example10","exampleTitle":"Object values","docPermalink":"/autocomplete-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Autocomplete cell type · Object 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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';\n\ntype Airport = {\n name: string;\n city: string;\n country: string;\n};\n\n@Component({\n selector: 'example10-autocomplete-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n
`\n})\nexport class AppComponent {\n // each `value` is an object, so the cell stores the whole airport, not only its name\n readonly airports = [\n { key: 'LAX', value: { name: 'Los Angeles International Airport', city: 'Los Angeles', country: 'USA' } },\n { key: 'JFK', value: { name: 'John F. Kennedy International Airport', city: 'New York', country: 'USA' } },\n { key: 'LHR', value: { name: 'London Heathrow Airport', city: 'London', country: 'United Kingdom' } },\n { key: 'CDG', value: { name: 'Charles de Gaulle Airport', city: 'Paris', country: 'France' } },\n { key: 'HND', value: { name: 'Tokyo Haneda Airport', city: 'Tokyo', country: 'Japan' } },\n { key: 'SIN', value: { name: 'Singapore Changi Airport', city: 'Singapore', country: 'Singapore' } },\n ];\n\n readonly shipments = [\n ['Electronics and Gadgets', this.airports[0]],\n ['Medical Supplies', this.airports[1]],\n ['Fresh Produce', this.airports[2]],\n ['Textiles', this.airports[3]],\n ['Pharmaceuticals', this.airports[4]],\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.airports,\n // display the city and the name of each airport\n sourceLabel: (airport: Airport) => `${airport.city} - ${airport.name}`,\n title: 'Destination airport',\n width: 400,\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/example10.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example10","exampleTitle":"Object values","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 adf9dc0c7b..5f912da16b 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: ` \n
`,\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 'SupplierHandsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: ` \n
`,\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 'SupplierHandsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`\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 0802bc3131..4f7da95bbd 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`\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 18395cfe40..0143842dae 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`\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 89be73f26e..03cb12bd09 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`\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 2791ca02d0..4c47b8f4c2 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`\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 5770b9e548..a2888b8936 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`\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 beb87d3b1b..5e7b73e3d8 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`\n})\nexport class AppComponent {\n readonly stockStatuses = [\n 'In stock ',\n 'Low stock ',\n 'Out of stock ',\n 'Backordered ',\n 'Discontinued ',\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`\n})\nexport class AppComponent {\n readonly stockStatuses = [\n 'In stock ',\n 'Low stock ',\n 'Out of stock ',\n 'Backordered ',\n 'Discontinued ',\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 766278cd95..66b9c084db 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 ff28286581..601519d016 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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__example10.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example10.js.json
index 2c51d2a5ec..f83e2fc6b3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example10.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example10.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · Object 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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\n// each `value` is an object, so the cell stores the whole airport, not only its name\nconst airports = [\n { key: 'LAX', value: { name: 'Los Angeles International Airport', city: 'Los Angeles', country: 'USA' } },\n { key: 'JFK', value: { name: 'John F. Kennedy International Airport', city: 'New York', country: 'USA' } },\n { key: 'LHR', value: { name: 'London Heathrow Airport', city: 'London', country: 'United Kingdom' } },\n { key: 'CDG', value: { name: 'Charles de Gaulle Airport', city: 'Paris', country: 'France' } },\n { key: 'HND', value: { name: 'Tokyo Haneda Airport', city: 'Tokyo', country: 'Japan' } },\n { key: 'SIN', value: { name: 'Singapore Changi Airport', city: 'Singapore', country: 'Singapore' } },\n];\n\nconst shipments = [\n ['Electronics and Gadgets', airports[0]],\n ['Medical Supplies', airports[1]],\n ['Fresh Produce', airports[2]],\n ['Textiles', airports[3]],\n ['Pharmaceuticals', airports[4]],\n];\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: shipments,\n columns: [\n {\n title: 'Shipment',\n },\n {\n type: 'autocomplete',\n source: airports,\n // display the city and the name of each airport\n sourceLabel: (airport) => `${airport.city} - ${airport.name}`,\n title: 'Destination airport',\n width: 400,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example10.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example10","exampleTitle":"Object values","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Autocomplete cell type · Object 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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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\n// each `value` is an object, so the cell stores the whole airport, not only its name\nconst airports = [\n { key: 'LAX', value: { name: 'Los Angeles International Airport', city: 'Los Angeles', country: 'USA' } },\n { key: 'JFK', value: { name: 'John F. Kennedy International Airport', city: 'New York', country: 'USA' } },\n { key: 'LHR', value: { name: 'London Heathrow Airport', city: 'London', country: 'United Kingdom' } },\n { key: 'CDG', value: { name: 'Charles de Gaulle Airport', city: 'Paris', country: 'France' } },\n { key: 'HND', value: { name: 'Tokyo Haneda Airport', city: 'Tokyo', country: 'Japan' } },\n { key: 'SIN', value: { name: 'Singapore Changi Airport', city: 'Singapore', country: 'Singapore' } },\n];\n\nconst shipments = [\n ['Electronics and Gadgets', airports[0]],\n ['Medical Supplies', airports[1]],\n ['Fresh Produce', airports[2]],\n ['Textiles', airports[3]],\n ['Pharmaceuticals', airports[4]],\n];\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: shipments,\n columns: [\n {\n title: 'Shipment',\n },\n {\n type: 'autocomplete',\n source: airports,\n // display the city and the name of each airport\n sourceLabel: (airport) => `${airport.city} - ${airport.name}`,\n title: 'Destination airport',\n width: 400,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example10.js","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example10","exampleTitle":"Object values","docPermalink":"/autocomplete-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example10.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example10.ts.json
index 07d1744808..aaa055a94e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example10.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example10.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · Object 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ntype Airport = {\n name: string;\n city: string;\n country: string;\n};\n\nconst container = document.querySelector('#example10')!;\n\n// each `value` is an object, so the cell stores the whole airport, not only its name\nconst airports = [\n { key: 'LAX', value: { name: 'Los Angeles International Airport', city: 'Los Angeles', country: 'USA' } },\n { key: 'JFK', value: { name: 'John F. Kennedy International Airport', city: 'New York', country: 'USA' } },\n { key: 'LHR', value: { name: 'London Heathrow Airport', city: 'London', country: 'United Kingdom' } },\n { key: 'CDG', value: { name: 'Charles de Gaulle Airport', city: 'Paris', country: 'France' } },\n { key: 'HND', value: { name: 'Tokyo Haneda Airport', city: 'Tokyo', country: 'Japan' } },\n { key: 'SIN', value: { name: 'Singapore Changi Airport', city: 'Singapore', country: 'Singapore' } },\n];\n\nconst shipments = [\n ['Electronics and Gadgets', airports[0]],\n ['Medical Supplies', airports[1]],\n ['Fresh Produce', airports[2]],\n ['Textiles', airports[3]],\n ['Pharmaceuticals', airports[4]],\n];\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: shipments,\n columns: [\n {\n title: 'Shipment',\n },\n {\n type: 'autocomplete',\n source: airports,\n // display the city and the name of each airport\n sourceLabel: (airport: Airport) => `${airport.city} - ${airport.name}`,\n title: 'Destination airport',\n width: 400,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example10.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example10","exampleTitle":"Object values","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Autocomplete cell type · Object 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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ntype Airport = {\n name: string;\n city: string;\n country: string;\n};\n\nconst container = document.querySelector('#example10')!;\n\n// each `value` is an object, so the cell stores the whole airport, not only its name\nconst airports = [\n { key: 'LAX', value: { name: 'Los Angeles International Airport', city: 'Los Angeles', country: 'USA' } },\n { key: 'JFK', value: { name: 'John F. Kennedy International Airport', city: 'New York', country: 'USA' } },\n { key: 'LHR', value: { name: 'London Heathrow Airport', city: 'London', country: 'United Kingdom' } },\n { key: 'CDG', value: { name: 'Charles de Gaulle Airport', city: 'Paris', country: 'France' } },\n { key: 'HND', value: { name: 'Tokyo Haneda Airport', city: 'Tokyo', country: 'Japan' } },\n { key: 'SIN', value: { name: 'Singapore Changi Airport', city: 'Singapore', country: 'Singapore' } },\n];\n\nconst shipments = [\n ['Electronics and Gadgets', airports[0]],\n ['Medical Supplies', airports[1]],\n ['Fresh Produce', airports[2]],\n ['Textiles', airports[3]],\n ['Pharmaceuticals', airports[4]],\n];\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: shipments,\n columns: [\n {\n title: 'Shipment',\n },\n {\n type: 'autocomplete',\n source: airports,\n // display the city and the name of each airport\n sourceLabel: (airport: Airport) => `${airport.city} - ${airport.name}`,\n title: 'Destination airport',\n width: 400,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example10.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example10","exampleTitle":"Object values","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 48ca0e732d..56c4b7c6f4 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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: ['SupplierHandsontable Example \n \n\n\n
\n \n\n","/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: ['SupplierHandsontable Example \n \n\n\n
\n \n\n","/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: ['SupplierHandsontable Example \n \n\n\n
\n \n\n","/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: ['SupplierHandsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 0fdcb6f622..51352487b2 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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 e48a29a3e8..8c69b130ce 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 1bf9dacab5..2d27f2dc0c 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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 249bc912d6..35d71dafdf 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 f339ca9146..ba7c8d5474 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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 4262905002..39d84f7b65 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 9f56e4d8ff..00100b8efd 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 d11ae155b3..37362d100e 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 33d02d7cc6..0935b4e270 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 d208580e75..6b19e4abcd 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 731ab3f532..25423aa5cf 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 bf050bb29b..778afce7dd 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst stockStatuses = [\n 'In stock ',\n 'Low stock ',\n 'Out of stock ',\n 'Backordered ',\n 'Discontinued ',\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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst stockStatuses = [\n 'In stock ',\n 'Low stock ',\n 'Out of stock ',\n 'Backordered ',\n 'Discontinued ',\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 8f25ca636d..22cf60faf3 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 'In stock ',\n 'Low stock ',\n 'Out of stock ',\n 'Backordered ',\n 'Discontinued ',\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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 'In stock ',\n 'Low stock ',\n 'Out of stock ',\n 'Backordered ',\n 'Discontinued ',\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 c605dd8ea3..5c8df71870 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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\ntype Airport = {\n name: string;\n city: string;\n country: string;\n};\n\n// each `value` is an object, so the cell stores the whole airport, not only its name\nconst airports = [\n { key: 'LAX', value: { name: 'Los Angeles International Airport', city: 'Los Angeles', country: 'USA' } },\n { key: 'JFK', value: { name: 'John F. Kennedy International Airport', city: 'New York', country: 'USA' } },\n { key: 'LHR', value: { name: 'London Heathrow Airport', city: 'London', country: 'United Kingdom' } },\n { key: 'CDG', value: { name: 'Charles de Gaulle Airport', city: 'Paris', country: 'France' } },\n { key: 'HND', value: { name: 'Tokyo Haneda Airport', city: 'Tokyo', country: 'Japan' } },\n { key: 'SIN', value: { name: 'Singapore Changi Airport', city: 'Singapore', country: 'Singapore' } },\n];\n\n// Declared outside the component, so a re-render passes the same arrays and the grid keeps\n// its edits instead of reloading the data and the column settings.\nconst shipments = [\n ['Electronics and Gadgets', airports[0]],\n ['Medical Supplies', airports[1]],\n ['Fresh Produce', airports[2]],\n ['Textiles', airports[3]],\n ['Pharmaceuticals', airports[4]],\n];\n\nconst columns = [\n {\n title: 'Shipment',\n },\n {\n type: 'autocomplete',\n source: airports,\n // display the city and the name of each airport\n sourceLabel: (airport: Airport) => `${airport.city} - ${airport.name}`,\n title: 'Destination airport',\n width: 400,\n },\n];\n\nconst ExampleComponent = () => {\n return (\n Handsontable React Example \n \n\n\n
\n \n\n","/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\ntype Airport = {\n name: string;\n city: string;\n country: string;\n};\n\n// each `value` is an object, so the cell stores the whole airport, not only its name\nconst airports = [\n { key: 'LAX', value: { name: 'Los Angeles International Airport', city: 'Los Angeles', country: 'USA' } },\n { key: 'JFK', value: { name: 'John F. Kennedy International Airport', city: 'New York', country: 'USA' } },\n { key: 'LHR', value: { name: 'London Heathrow Airport', city: 'London', country: 'United Kingdom' } },\n { key: 'CDG', value: { name: 'Charles de Gaulle Airport', city: 'Paris', country: 'France' } },\n { key: 'HND', value: { name: 'Tokyo Haneda Airport', city: 'Tokyo', country: 'Japan' } },\n { key: 'SIN', value: { name: 'Singapore Changi Airport', city: 'Singapore', country: 'Singapore' } },\n];\n\n// Declared outside the component, so a re-render passes the same arrays and the grid keeps\n// its edits instead of reloading the data and the column settings.\nconst shipments = [\n ['Electronics and Gadgets', airports[0]],\n ['Medical Supplies', airports[1]],\n ['Fresh Produce', airports[2]],\n ['Textiles', airports[3]],\n ['Pharmaceuticals', airports[4]],\n];\n\nconst columns = [\n {\n title: 'Shipment',\n },\n {\n type: 'autocomplete',\n source: airports,\n // display the city and the name of each airport\n sourceLabel: (airport: Airport) => `${airport.city} - ${airport.name}`,\n title: 'Destination airport',\n width: 400,\n },\n];\n\nconst ExampleComponent = () => {\n return (\n Handsontable React Example \n \n\n\n
\n \n\n","/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 (allowInvalid false)', 'SKU', 'Warehouse', 'ProductHandsontable React Example \n \n\n\n
\n \n\n","/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 (allowInvalid false)', 'SKU', 'Warehouse', 'ProductHandsontable React Example \n \n\n\n
\n \n\n","/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 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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 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 6c8abbc670..4d8cd9e7a8 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 'In stock ',\n 'Low stock ',\n 'Out of stock ',\n 'Backordered ',\n 'Discontinued ',\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 Handsontable React Example \n \n\n\n
\n \n\n","/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 'In stock ',\n 'Low stock ',\n 'Out of stock ',\n 'Backordered ',\n 'Discontinued ',\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 Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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__example10.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example10.vue.json
index 5aff507aa5..d708611618 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example10.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example10.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · Object 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example10\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example10.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example10","exampleTitle":"Object values","docPermalink":"/autocomplete-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Autocomplete cell type · Object 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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example10\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/cell-types/autocomplete-cell-type/vue/example10.vue","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example10","exampleTitle":"Object 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__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example2.vue.json
index 9d5e5c819e..caf6309d4b 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n "},"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 0f1bbf9a5c..0f65a6021a 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n\n \n
\n "},"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 84419a10a5..ed2463db48 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n\n \n
\n "},"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 e322804640..68e621542d 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n\n \n
\n "},"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 dbec5a6a32..89bc4c756a 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"\n\n\n \n
\n "},"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 f24bae824a..89f2ce12cf 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example7\");","/src/App.vue":"\n\n\n \n
\n "},"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 6c4052cabc..8627dd9a14 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example8\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example8\");","/src/App.vue":"\n\n\n \n
\n "},"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 b559432c50..27d534a5be 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example9\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example9\");","/src/App.vue":"\n\n\n \n
\n "},"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 ad449b4d3c..3c3e0eb041 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(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: ` \n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(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: ` \n
`,\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 70d4e92d28..32402a770a 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`,\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 9710718897..e3299312e1 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(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: `Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(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: `Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 5d209df31f..aea5a59761 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 3dcb7d9a5f..c58817d56c 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 4aa6d29f29..b4238b05c0 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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 ab498eee6b..1d9868cb04 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 bed319b230..e531f7837a 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 5de66d14c0..f6ea3b8d03 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 (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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 (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 3c6f181253..bac3cc2312 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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 12d6e49659..b71c64f60e 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n "},"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 dc1e665f50..3335a067ad 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n\n \n
\n "},"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 e7130943ca..bac18f33f0 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`,\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 0f96598913..5f5226f829 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`,\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 41b86426dc..07f5b9dd97 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`,\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 12e9c10061..c2bb793721 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`,\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__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example5.ts.json
index cea2a1c805..7ae1ac8873 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Checkbox cell type · Check all in the column 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n Handsontable Angular Example \n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 4ec9aebadb..033082469d 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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 b4edc781ae..116f5b83c0 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 8dd7230478..6931968e7b 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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 eff183d972..ea374fb25b 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 31e0723cf9..164923ce73 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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 1ab1bf8741..fea1cb03b9 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 c23d299e5f..3210de2a5e 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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__javascript__example5.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example5.js.json
index c3eff33fc8..adac444224 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example5.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example5.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Checkbox cell type · Check all in the column 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 { task: 'Update API docs', assignee: 'Ana García', done: true },\n { task: 'Deploy hotfix', assignee: 'James Okafor', done: false },\n { task: 'Review pull request', assignee: 'Li Wei', done: true },\n { task: 'Plan sprint', assignee: 'Ana García', done: false },\n { task: 'Fix login bug', assignee: 'James Okafor', done: false },\n { task: 'Write release notes', assignee: 'Li Wei', done: false },\n ],\n columns: [\n { data: 'task', title: 'Task' },\n { data: 'assignee', title: 'Assignee' },\n {\n data: 'done',\n title: 'Done',\n type: 'checkbox',\n // add a \"check all\" checkbox to the column header\n headerCheckbox: true,\n },\n ],\n colHeaders: true,\n rowHeaders: true,\n // reach the header checkboxes with the arrow keys, toggle them with Space\n navigableHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example5.js","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example5","exampleTitle":"Check all in the column header","docPermalink":"/checkbox-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Checkbox cell type · Check all in the column 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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 { task: 'Update API docs', assignee: 'Ana García', done: true },\n { task: 'Deploy hotfix', assignee: 'James Okafor', done: false },\n { task: 'Review pull request', assignee: 'Li Wei', done: true },\n { task: 'Plan sprint', assignee: 'Ana García', done: false },\n { task: 'Fix login bug', assignee: 'James Okafor', done: false },\n { task: 'Write release notes', assignee: 'Li Wei', done: false },\n ],\n columns: [\n { data: 'task', title: 'Task' },\n { data: 'assignee', title: 'Assignee' },\n {\n data: 'done',\n title: 'Done',\n type: 'checkbox',\n // add a \"check all\" checkbox to the column header\n headerCheckbox: true,\n },\n ],\n colHeaders: true,\n rowHeaders: true,\n // reach the header checkboxes with the arrow keys, toggle them with Space\n navigableHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example5.js","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example5","exampleTitle":"Check all in the column header","docPermalink":"/checkbox-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example5.ts.json
index b04b769a33..997402362f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example5.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Checkbox cell type · Check all in the column 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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 { task: 'Update API docs', assignee: 'Ana García', done: true },\n { task: 'Deploy hotfix', assignee: 'James Okafor', done: false },\n { task: 'Review pull request', assignee: 'Li Wei', done: true },\n { task: 'Plan sprint', assignee: 'Ana García', done: false },\n { task: 'Fix login bug', assignee: 'James Okafor', done: false },\n { task: 'Write release notes', assignee: 'Li Wei', done: false },\n ],\n columns: [\n { data: 'task', title: 'Task' },\n { data: 'assignee', title: 'Assignee' },\n {\n data: 'done',\n title: 'Done',\n type: 'checkbox',\n // add a \"check all\" checkbox to the column header\n headerCheckbox: true,\n },\n ],\n colHeaders: true,\n rowHeaders: true,\n // reach the header checkboxes with the arrow keys, toggle them with Space\n navigableHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example5.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example5","exampleTitle":"Check all in the column header","docPermalink":"/checkbox-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Checkbox cell type · Check all in the column 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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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 { task: 'Update API docs', assignee: 'Ana García', done: true },\n { task: 'Deploy hotfix', assignee: 'James Okafor', done: false },\n { task: 'Review pull request', assignee: 'Li Wei', done: true },\n { task: 'Plan sprint', assignee: 'Ana García', done: false },\n { task: 'Fix login bug', assignee: 'James Okafor', done: false },\n { task: 'Write release notes', assignee: 'Li Wei', done: false },\n ],\n columns: [\n { data: 'task', title: 'Task' },\n { data: 'assignee', title: 'Assignee' },\n {\n data: 'done',\n title: 'Done',\n type: 'checkbox',\n // add a \"check all\" checkbox to the column header\n headerCheckbox: true,\n },\n ],\n colHeaders: true,\n rowHeaders: true,\n // reach the header checkboxes with the arrow keys, toggle them with Space\n navigableHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/checkbox-cell-type/javascript/example5.ts","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example5","exampleTitle":"Check all in the column header","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 c06b02d00f..84db9fde71 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 { task: 'Update API docs', assignee: 'Ana García', done: true },\n { task: 'Deploy hotfix', assignee: 'James Okafor', done: false },\n { task: 'Review pull request', assignee: 'Li Wei', done: true },\n { task: 'Plan sprint', assignee: 'Ana García', done: false },\n { task: 'Fix login bug', assignee: 'James Okafor', done: false },\n { task: 'Write release notes', assignee: 'Li Wei', done: false },\n];\n\nconst ExampleComponent = () => {\n return (\n Handsontable React Example \n \n\n\n
\n \n\n","/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 { task: 'Update API docs', assignee: 'Ana García', done: true },\n { task: 'Deploy hotfix', assignee: 'James Okafor', done: false },\n { task: 'Review pull request', assignee: 'Li Wei', done: true },\n { task: 'Plan sprint', assignee: 'Ana García', done: false },\n { task: 'Fix login bug', assignee: 'James Okafor', done: false },\n { task: 'Write release notes', assignee: 'Li Wei', done: false },\n];\n\nconst ExampleComponent = () => {\n return (\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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 b5f590064e..74e6661ab4 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n "},"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 5145665e5e..908b29f0a5 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n\n \n
\n "},"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 04dd14b640..067e84c811 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n\n \n
\n "},"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__checkbox-cell-type__vue__example5.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example5.vue.json
index 9cdceb2588..43157b700a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example5.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__vue__example5.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Checkbox cell type · Check all in the column 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/cell-types/checkbox-cell-type/vue/example5.vue","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example5","exampleTitle":"Check all in the column header","docPermalink":"/checkbox-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Checkbox cell type · Check all in the column 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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/cell-types/checkbox-cell-type/vue/example5.vue","breadcrumb":["Cell Types","Checkbox cell type"],"guide":"guides/cell-types/checkbox-cell-type/checkbox-cell-type.md","guideTitle":"Checkbox cell type","exampleId":"example5","exampleTitle":"Check all in the column header","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 4207b7beb4..fad31b2706 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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 \n
\n
\n
\n {{ selectedLabel }} \n \n
\n
\n
\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-Latn-RS', 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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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 \n
\n
\n
\n {{ selectedLabel }} \n \n
\n
\n
\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-Latn-RS', 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 fb2634e28b..760430b831 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n
\n
\n English (United States) \n \n \n
\n
\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n
\n
\n English (United States) \n \n \n
\n
\n
\n \n\n","/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 306393ec8b..f146f81545 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n
\n
\n English (United States) \n \n \n
\n
\n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n
\n
\n English (United States) \n \n \n
\n
\n
\n \n\n","/index.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 6138e4ea72..f8d32a14ef 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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-Latn-RS', 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(null);\n const dropdownRef = useRef(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 \n
\n
\n
setIsOpen(!isOpen)}\n >\n {selectedLabel} \n \n {localeOptions.map((opt) => (\n handleSelect(opt.value)}\n >\n {opt.label}\n \n ))}\n \n )}\n \n
\n
Handsontable React Example \n \n\n\n
\n \n\n","/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-Latn-RS', 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(null);\n const dropdownRef = useRef(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 \n
\n
\n
setIsOpen(!isOpen)}\n >\n {selectedLabel} \n \n {localeOptions.map((opt) => (\n handleSelect(opt.value)}\n >\n {opt.label}\n \n ))}\n \n )}\n \n
\n
Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n
\n
\n
\n {{ selectedLabel() }} \n \n
\n
\n
\n
"},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n
\n
\n
\n {{ selectedLabel() }} \n \n
\n
\n
\n
"},"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 95598203a4..92ecbd2373 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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 \n
\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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 \n
\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 713a086f8f..9957b2d4c1 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 dbdaed1496..56637c695d 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 efd23a4ac7..09fd49c519 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 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 2a4e3fe457..ce816c1676 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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 034fab9e8d..88f31107f0 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`,\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 fe32cf2c99..fb34fe36e5 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`\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 f8edf77a5b..b3ca2918d9 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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: ` \n
`\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 2c4cbb673e..94e8fed3ac 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: ` \n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: ` \n
`,\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 253dcd99e4..a575e91ad7 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: ` \n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: ` \n
`,\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__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example6.ts.json
index 29d5888db9..0d63d2294b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__angular__example6.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Dropdown cell type · Object 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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-dropdown-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n
`\n})\nexport class AppComponent {\n // each `value` is an object, so the cell stores the whole airport, not only its name\n readonly airports = [\n { key: 'LAX', value: { name: 'Los Angeles International Airport', city: 'Los Angeles', country: 'USA' } },\n { key: 'JFK', value: { name: 'John F. Kennedy International Airport', city: 'New York', country: 'USA' } },\n { key: 'LHR', value: { name: 'London Heathrow Airport', city: 'London', country: 'United Kingdom' } },\n { key: 'CDG', value: { name: 'Charles de Gaulle Airport', city: 'Paris', country: 'France' } },\n { key: 'HND', value: { name: 'Tokyo Haneda Airport', city: 'Tokyo', country: 'Japan' } },\n { key: 'SIN', value: { name: 'Singapore Changi Airport', city: 'Singapore', country: 'Singapore' } },\n ];\n\n readonly shipments = [\n ['Electronics and Gadgets', this.airports[0]],\n ['Medical Supplies', this.airports[1]],\n ['Fresh Produce', this.airports[2]],\n ['Textiles', this.airports[3]],\n ['Pharmaceuticals', this.airports[4]],\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.airports,\n // display the `name` property of each airport\n sourceLabel: 'name',\n title: 'Destination airport',\n width: 320,\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/example6.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example6","exampleTitle":"Object values","docPermalink":"/dropdown-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Dropdown cell type · Object 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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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-dropdown-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n
`\n})\nexport class AppComponent {\n // each `value` is an object, so the cell stores the whole airport, not only its name\n readonly airports = [\n { key: 'LAX', value: { name: 'Los Angeles International Airport', city: 'Los Angeles', country: 'USA' } },\n { key: 'JFK', value: { name: 'John F. Kennedy International Airport', city: 'New York', country: 'USA' } },\n { key: 'LHR', value: { name: 'London Heathrow Airport', city: 'London', country: 'United Kingdom' } },\n { key: 'CDG', value: { name: 'Charles de Gaulle Airport', city: 'Paris', country: 'France' } },\n { key: 'HND', value: { name: 'Tokyo Haneda Airport', city: 'Tokyo', country: 'Japan' } },\n { key: 'SIN', value: { name: 'Singapore Changi Airport', city: 'Singapore', country: 'Singapore' } },\n ];\n\n readonly shipments = [\n ['Electronics and Gadgets', this.airports[0]],\n ['Medical Supplies', this.airports[1]],\n ['Fresh Produce', this.airports[2]],\n ['Textiles', this.airports[3]],\n ['Pharmaceuticals', this.airports[4]],\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.airports,\n // display the `name` property of each airport\n sourceLabel: 'name',\n title: 'Destination airport',\n width: 320,\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/example6.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example6","exampleTitle":"Object values","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 dd6ea83161..8421699bae 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 bf877b9b28..47389c3d60 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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 4490eaf502..ec652a5c0a 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 39392e1d37..9624e53b5b 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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 a4fc2b1097..bc3337ed2a 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 d3fed7a451..904a7355a7 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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 5089fba89f..e91df958ff 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 89025e5424..d195d006a4 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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 5c02d4df2c..0033e27b38 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 17ad6e8629..9160134fe6 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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__javascript__example6.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example6.js.json
index 09a080dd0d..3c818b1d00 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example6.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example6.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Dropdown cell type · Object 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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// each `value` is an object, so the cell stores the whole airport, not only its name\nconst airports = [\n { key: 'LAX', value: { name: 'Los Angeles International Airport', city: 'Los Angeles', country: 'USA' } },\n { key: 'JFK', value: { name: 'John F. Kennedy International Airport', city: 'New York', country: 'USA' } },\n { key: 'LHR', value: { name: 'London Heathrow Airport', city: 'London', country: 'United Kingdom' } },\n { key: 'CDG', value: { name: 'Charles de Gaulle Airport', city: 'Paris', country: 'France' } },\n { key: 'HND', value: { name: 'Tokyo Haneda Airport', city: 'Tokyo', country: 'Japan' } },\n { key: 'SIN', value: { name: 'Singapore Changi Airport', city: 'Singapore', country: 'Singapore' } },\n];\n\nconst shipments = [\n ['Electronics and Gadgets', airports[0]],\n ['Medical Supplies', airports[1]],\n ['Fresh Produce', airports[2]],\n ['Textiles', airports[3]],\n ['Pharmaceuticals', airports[4]],\n];\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: shipments,\n columns: [\n {\n title: 'Shipment',\n },\n {\n type: 'dropdown',\n source: airports,\n // display the `name` property of each airport\n sourceLabel: 'name',\n title: 'Destination airport',\n width: 320,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example6.js","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example6","exampleTitle":"Object values","docPermalink":"/dropdown-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Dropdown cell type · Object 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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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// each `value` is an object, so the cell stores the whole airport, not only its name\nconst airports = [\n { key: 'LAX', value: { name: 'Los Angeles International Airport', city: 'Los Angeles', country: 'USA' } },\n { key: 'JFK', value: { name: 'John F. Kennedy International Airport', city: 'New York', country: 'USA' } },\n { key: 'LHR', value: { name: 'London Heathrow Airport', city: 'London', country: 'United Kingdom' } },\n { key: 'CDG', value: { name: 'Charles de Gaulle Airport', city: 'Paris', country: 'France' } },\n { key: 'HND', value: { name: 'Tokyo Haneda Airport', city: 'Tokyo', country: 'Japan' } },\n { key: 'SIN', value: { name: 'Singapore Changi Airport', city: 'Singapore', country: 'Singapore' } },\n];\n\nconst shipments = [\n ['Electronics and Gadgets', airports[0]],\n ['Medical Supplies', airports[1]],\n ['Fresh Produce', airports[2]],\n ['Textiles', airports[3]],\n ['Pharmaceuticals', airports[4]],\n];\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: shipments,\n columns: [\n {\n title: 'Shipment',\n },\n {\n type: 'dropdown',\n source: airports,\n // display the `name` property of each airport\n sourceLabel: 'name',\n title: 'Destination airport',\n width: 320,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example6.js","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example6","exampleTitle":"Object values","docPermalink":"/dropdown-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example6.ts.json
index 8849a6bd61..1e41aa4c12 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example6.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Dropdown cell type · Object 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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\n// each `value` is an object, so the cell stores the whole airport, not only its name\nconst airports = [\n { key: 'LAX', value: { name: 'Los Angeles International Airport', city: 'Los Angeles', country: 'USA' } },\n { key: 'JFK', value: { name: 'John F. Kennedy International Airport', city: 'New York', country: 'USA' } },\n { key: 'LHR', value: { name: 'London Heathrow Airport', city: 'London', country: 'United Kingdom' } },\n { key: 'CDG', value: { name: 'Charles de Gaulle Airport', city: 'Paris', country: 'France' } },\n { key: 'HND', value: { name: 'Tokyo Haneda Airport', city: 'Tokyo', country: 'Japan' } },\n { key: 'SIN', value: { name: 'Singapore Changi Airport', city: 'Singapore', country: 'Singapore' } },\n];\n\nconst shipments = [\n ['Electronics and Gadgets', airports[0]],\n ['Medical Supplies', airports[1]],\n ['Fresh Produce', airports[2]],\n ['Textiles', airports[3]],\n ['Pharmaceuticals', airports[4]],\n];\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: shipments,\n columns: [\n {\n title: 'Shipment',\n },\n {\n type: 'dropdown',\n source: airports,\n // display the `name` property of each airport\n sourceLabel: 'name',\n title: 'Destination airport',\n width: 320,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example6.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example6","exampleTitle":"Object values","docPermalink":"/dropdown-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Dropdown cell type · Object 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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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\n// each `value` is an object, so the cell stores the whole airport, not only its name\nconst airports = [\n { key: 'LAX', value: { name: 'Los Angeles International Airport', city: 'Los Angeles', country: 'USA' } },\n { key: 'JFK', value: { name: 'John F. Kennedy International Airport', city: 'New York', country: 'USA' } },\n { key: 'LHR', value: { name: 'London Heathrow Airport', city: 'London', country: 'United Kingdom' } },\n { key: 'CDG', value: { name: 'Charles de Gaulle Airport', city: 'Paris', country: 'France' } },\n { key: 'HND', value: { name: 'Tokyo Haneda Airport', city: 'Tokyo', country: 'Japan' } },\n { key: 'SIN', value: { name: 'Singapore Changi Airport', city: 'Singapore', country: 'Singapore' } },\n];\n\nconst shipments = [\n ['Electronics and Gadgets', airports[0]],\n ['Medical Supplies', airports[1]],\n ['Fresh Produce', airports[2]],\n ['Textiles', airports[3]],\n ['Pharmaceuticals', airports[4]],\n];\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: shipments,\n columns: [\n {\n title: 'Shipment',\n },\n {\n type: 'dropdown',\n source: airports,\n // display the `name` property of each airport\n sourceLabel: 'name',\n title: 'Destination airport',\n width: 320,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/dropdown-cell-type/javascript/example6.ts","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example6","exampleTitle":"Object values","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 b9a3d2b685..f3405884f5 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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\n// each `value` is an object, so the cell stores the whole airport, not only its name\nconst airports = [\n { key: 'LAX', value: { name: 'Los Angeles International Airport', city: 'Los Angeles', country: 'USA' } },\n { key: 'JFK', value: { name: 'John F. Kennedy International Airport', city: 'New York', country: 'USA' } },\n { key: 'LHR', value: { name: 'London Heathrow Airport', city: 'London', country: 'United Kingdom' } },\n { key: 'CDG', value: { name: 'Charles de Gaulle Airport', city: 'Paris', country: 'France' } },\n { key: 'HND', value: { name: 'Tokyo Haneda Airport', city: 'Tokyo', country: 'Japan' } },\n { key: 'SIN', value: { name: 'Singapore Changi Airport', city: 'Singapore', country: 'Singapore' } },\n];\n\n// Declared outside the component, so a re-render passes the same arrays and the grid keeps\n// its edits instead of reloading the data and the column settings.\nconst shipments = [\n ['Electronics and Gadgets', airports[0]],\n ['Medical Supplies', airports[1]],\n ['Fresh Produce', airports[2]],\n ['Textiles', airports[3]],\n ['Pharmaceuticals', airports[4]],\n];\n\nconst columns = [\n {\n title: 'Shipment',\n },\n {\n type: 'dropdown',\n source: airports,\n // display the `name` property of each airport\n sourceLabel: 'name',\n title: 'Destination airport',\n width: 320,\n },\n];\n\nconst ExampleComponent = () => {\n return (\n Handsontable React Example \n \n\n\n
\n \n\n","/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\n// each `value` is an object, so the cell stores the whole airport, not only its name\nconst airports = [\n { key: 'LAX', value: { name: 'Los Angeles International Airport', city: 'Los Angeles', country: 'USA' } },\n { key: 'JFK', value: { name: 'John F. Kennedy International Airport', city: 'New York', country: 'USA' } },\n { key: 'LHR', value: { name: 'London Heathrow Airport', city: 'London', country: 'United Kingdom' } },\n { key: 'CDG', value: { name: 'Charles de Gaulle Airport', city: 'Paris', country: 'France' } },\n { key: 'HND', value: { name: 'Tokyo Haneda Airport', city: 'Tokyo', country: 'Japan' } },\n { key: 'SIN', value: { name: 'Singapore Changi Airport', city: 'Singapore', country: 'Singapore' } },\n];\n\n// Declared outside the component, so a re-render passes the same arrays and the grid keeps\n// its edits instead of reloading the data and the column settings.\nconst shipments = [\n ['Electronics and Gadgets', airports[0]],\n ['Medical Supplies', airports[1]],\n ['Fresh Produce', airports[2]],\n ['Textiles', airports[3]],\n ['Pharmaceuticals', airports[4]],\n];\n\nconst columns = [\n {\n title: 'Shipment',\n },\n {\n type: 'dropdown',\n source: airports,\n // display the `name` property of each airport\n sourceLabel: 'name',\n title: 'Destination airport',\n width: 320,\n },\n];\n\nconst ExampleComponent = () => {\n return (\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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 1c0751ac4f..59d35ac066 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n "},"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 2f1237df43..694d2e3a52 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n\n \n
\n "},"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 e7b5b7d730..2ec54b9235 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example4\");","/src/App.vue":"\n\n\n \n
\n "},"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 4e7fee1ae9..bfb2b75fec 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example5\");","/src/App.vue":"\n\n\n \n
\n "},"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__dropdown-cell-type__vue__example6.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example6.vue.json
index f578a0cffb..a630dacef7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example6.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__vue__example6.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Dropdown cell type · Object 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/cell-types/dropdown-cell-type/vue/example6.vue","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example6","exampleTitle":"Object values","docPermalink":"/dropdown-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Dropdown cell type · Object 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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example6\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/cell-types/dropdown-cell-type/vue/example6.vue","breadcrumb":["Cell Types","Dropdown cell type"],"guide":"guides/cell-types/dropdown-cell-type/dropdown-cell-type.md","guideTitle":"Dropdown cell type","exampleId":"example6","exampleTitle":"Object values","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 6ee1cec1e6..edb363fc36 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: ` \n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: ` \n
`,\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 86d13fd3b7..43d97a8c90 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 54368d9d8c..b97157d5f5 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 703328b390..993e36d924 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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 b48d76b6a3..0c6ac262da 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: ` \n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: ` \n
`,\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 730270fe60..14aca2dc6a 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: ` \n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: ` \n
`,\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 b9a5f1a0f9..935f814de5 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: ` \n
`,\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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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: ` \n
`,\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 fa35c5a875..cf309650f7 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 c07bbefdd2..cdf93e269c 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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 ebac0808cd..6a42593393 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 25e8b28886..48bf76b6b2 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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 433ad4f7e4..17f8e99510 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/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 7804ac1f44..63a438a551 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n \n\n","/index.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 119913f9f0..d26d1003bf 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable React Example \n \n\n\n
\n \n\n","/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 Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"\n\n\n \n
\n "},"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 6ab6fdc84d..15bd07774c 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"\n\n\n \n
\n "},"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 4e0cc25df0..7562ba10fa 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/vue3\": \"0.0.0-next-963c44a-20261021\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n\n \n
\n "},"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-36242d6-20261027","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/vue3\": \"0.0.0-next-36242d6-20261027\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n Handsontable Vue Example \n\n\n
\n \n\n","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example3\");","/src/App.vue":"\n\n\n \n
\n "},"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 44e70aef3d..e20b5b6ee5 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-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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 \n
\n
\n
\n {{ selectedLabel }} \n \n
\n
\n
\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-Latn-RS', 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-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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 \n
\n
\n
\n {{ selectedLabel }} \n \n
\n
\n
\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-Latn-RS', 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__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__angular__example2.ts.json
index dd54731832..ac42ac2db3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Numeric cell type · Preserve the typed literal · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-963c44a-20261021","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { ChangeDetectorRef, Component, ViewChild, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\n@Component({\n selector: 'example2-numeric-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n `,\n})\nexport class AppComponent {\n @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n private readonly cdr = inject(ChangeDetectorRef);\n\n readout = 'Edit a cell in the Default or preserveNumericLiteral column to see the stored value.';\n\n readonly data = [\n ['Stainless Steel Water Bottle', 24.5, 24.5],\n ['Wireless Mouse', 18, 18],\n ['USB-C Charging Cable', 9.9, 9.9],\n ['Desk Lamp', 32, 32],\n ['Notebook A5', 4.75, 4.75],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Product', 'Default', 'preserveNumericLiteral: true'],\n columns: [\n { type: 'text', readOnly: true, width: 240 },\n { type: 'numeric' },\n { type: 'numeric', preserveNumericLiteral: true },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n afterChange: (changes: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) => {\n if (source === 'loadData' || !changes) {\n return;\n }\n\n const [row, prop] = changes[changes.length - 1];\n const column = prop as number;\n const value = this.hotTable.hotInstance!.getDataAtCell(row, column);\n const label = column === 1 ? 'Default' : 'preserveNumericLiteral';\n\n this.readout = `${label} stores: ${JSON.stringify(value)} (${typeof value})`;\n this.cdr.detectChanges();\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/example2.ts","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example2","exampleTitle":"Preserve the typed literal","docPermalink":"/numeric-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Numeric cell type · Preserve the typed literal · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-36242d6-20261027","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-36242d6-20261027\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { ChangeDetectorRef, Component, ViewChild, inject } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport Handsontable from 'handsontable/base';\n\n@Component({\n selector: 'example2-numeric-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \n `,\n})\nexport class AppComponent {\n @ViewChild('hotTable') hotTable!: HotTableComponent;\n\n private readonly cdr = inject(ChangeDetectorRef);\n\n readout = 'Edit a cell in the Default or preserveNumericLiteral column to see the stored value.';\n\n readonly data = [\n ['Stainless Steel Water Bottle', 24.5, 24.5],\n ['Wireless Mouse', 18, 18],\n ['USB-C Charging Cable', 9.9, 9.9],\n ['Desk Lamp', 32, 32],\n ['Notebook A5', 4.75, 4.75],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Product', 'Default', 'preserveNumericLiteral: true'],\n columns: [\n { type: 'text', readOnly: true, width: 240 },\n { type: 'numeric' },\n { type: 'numeric', preserveNumericLiteral: true },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n afterChange: (changes: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) => {\n if (source === 'loadData' || !changes) {\n return;\n }\n\n const [row, prop] = changes[changes.length - 1];\n const column = prop as number;\n const value = this.hotTable.hotInstance!.getDataAtCell(row, column);\n const label = column === 1 ? 'Default' : 'preserveNumericLiteral';\n\n this.readout = `${label} stores: ${JSON.stringify(value)} (${typeof value})`;\n this.cdr.detectChanges();\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/example2.ts","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example2","exampleTitle":"Preserve the typed literal","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 a2e5eee9e6..27c74f2806 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n
\n
\n English (United States) \n \n \n
\n
\n
\n \n\n","/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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n
\n
\n English (United States) \n \n \n
\n
\n
\n \n\n","/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 8123ba0286..a133ac0423 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-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n
\n
\n English (United States) \n \n \n
\n
\n
\n \n\n","/index.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-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n \n
\n
\n
\n English (United States) \n \n \n
\n
\n
\n \n\n","/index.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__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example2.js.json
index 0db73c3341..b31d3b0da3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Numeric cell type · Preserve the typed literal · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n Edit a cell in the Default or preserveNumericLiteral column to see the stored value.
\n \n\n","/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 readout = document.querySelector('#example2-readout');\n\nconst hot = new Handsontable(container, {\n data: [\n ['Stainless Steel Water Bottle', 24.5, 24.5],\n ['Wireless Mouse', 18, 18],\n ['USB-C Charging Cable', 9.9, 9.9],\n ['Desk Lamp', 32, 32],\n ['Notebook A5', 4.75, 4.75],\n ],\n colHeaders: ['Product', 'Default', 'preserveNumericLiteral: true'],\n columns: [\n { type: 'text', readOnly: true, width: 240 },\n { type: 'numeric' },\n { type: 'numeric', preserveNumericLiteral: true },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n afterChange(changes, source) {\n if (source === 'loadData' || !changes) {\n return;\n }\n\n const [row, prop] = changes[changes.length - 1];\n const column = prop;\n const value = hot.getDataAtCell(row, column);\n const label = column === 1 ? 'Default' : 'preserveNumericLiteral';\n\n readout.textContent = `${label} stores: ${JSON.stringify(value)} (${typeof value})`;\n },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/numeric-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example2","exampleTitle":"Preserve the typed literal","docPermalink":"/numeric-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Numeric cell type · Preserve the typed literal · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n Edit a cell in the Default or preserveNumericLiteral column to see the stored value.
\n \n\n","/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 readout = document.querySelector('#example2-readout');\n\nconst hot = new Handsontable(container, {\n data: [\n ['Stainless Steel Water Bottle', 24.5, 24.5],\n ['Wireless Mouse', 18, 18],\n ['USB-C Charging Cable', 9.9, 9.9],\n ['Desk Lamp', 32, 32],\n ['Notebook A5', 4.75, 4.75],\n ],\n colHeaders: ['Product', 'Default', 'preserveNumericLiteral: true'],\n columns: [\n { type: 'text', readOnly: true, width: 240 },\n { type: 'numeric' },\n { type: 'numeric', preserveNumericLiteral: true },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n afterChange(changes, source) {\n if (source === 'loadData' || !changes) {\n return;\n }\n\n const [row, prop] = changes[changes.length - 1];\n const column = prop;\n const value = hot.getDataAtCell(row, column);\n const label = column === 1 ? 'Default' : 'preserveNumericLiteral';\n\n readout.textContent = `${label} stores: ${JSON.stringify(value)} (${typeof value})`;\n },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/numeric-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example2","exampleTitle":"Preserve the typed literal","docPermalink":"/numeric-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example2.ts.json
index b287dd75c7..797dd35e76 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Numeric cell type · Preserve the typed literal · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-963c44a-20261021","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n Edit a cell in the Default or preserveNumericLiteral column to see the stored value.
\n \n\n","/index.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 readout = document.querySelector('#example2-readout')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['Stainless Steel Water Bottle', 24.5, 24.5],\n ['Wireless Mouse', 18, 18],\n ['USB-C Charging Cable', 9.9, 9.9],\n ['Desk Lamp', 32, 32],\n ['Notebook A5', 4.75, 4.75],\n ],\n colHeaders: ['Product', 'Default', 'preserveNumericLiteral: true'],\n columns: [\n { type: 'text', readOnly: true, width: 240 },\n { type: 'numeric' },\n { type: 'numeric', preserveNumericLiteral: true },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n afterChange(changes, source) {\n if (source === 'loadData' || !changes) {\n return;\n }\n\n const [row, prop] = changes[changes.length - 1];\n const column = prop as number;\n const value = hot.getDataAtCell(row, column);\n const label = column === 1 ? 'Default' : 'preserveNumericLiteral';\n\n readout.textContent = `${label} stores: ${JSON.stringify(value)} (${typeof value})`;\n },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/numeric-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example2","exampleTitle":"Preserve the typed literal","docPermalink":"/numeric-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Numeric cell type · Preserve the typed literal · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-36242d6-20261027","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-36242d6-20261027\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\n\n\n Handsontable Example \n \n\n\n
\n Edit a cell in the Default or preserveNumericLiteral column to see the stored value.
\n \n\n","/index.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 readout = document.querySelector('#example2-readout')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['Stainless Steel Water Bottle', 24.5, 24.5],\n ['Wireless Mouse', 18, 18],\n ['USB-C Charging Cable', 9.9, 9.9],\n ['Desk Lamp', 32, 32],\n ['Notebook A5', 4.75, 4.75],\n ],\n colHeaders: ['Product', 'Default', 'preserveNumericLiteral: true'],\n columns: [\n { type: 'text', readOnly: true, width: 240 },\n { type: 'numeric' },\n { type: 'numeric', preserveNumericLiteral: true },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n afterChange(changes, source) {\n if (source === 'loadData' || !changes) {\n return;\n }\n\n const [row, prop] = changes[changes.length - 1];\n const column = prop as number;\n const value = hot.getDataAtCell(row, column);\n const label = column === 1 ? 'Default' : 'preserveNumericLiteral';\n\n readout.textContent = `${label} stores: ${JSON.stringify(value)} (${typeof value})`;\n },\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/numeric-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example2","exampleTitle":"Preserve the typed literal","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 74dbda8abf..459f27bda1 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-963c44a-20261021","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-963c44a-20261021\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-963c44a-20261021\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n Handsontable React Example \n \n\n\n
\n \n\n","/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-Latn-RS', 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(null);\n const dropdownRef = useRef(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