(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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 46429c93d..6e3589859 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 9f6157dfb..2c3647372 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 83b09aafc..4ad40124e 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 3fcb50b0b..58ea662ed 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 796dd21ec..b66edfab4 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 289d6df08..5e4b2b5e7 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 ae98bcd66..ae9d0d55c 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 2453fb542..5d0d300c8 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 1c9864448..30200b31c 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 a0c23b3a0..8cece38e2 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 4b82de73d..7a5868ea8 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 c62e84368..c246f0dcd 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 e4edc5f33..03d9a7e2f 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-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"}
+{"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-193d031-20261028","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-193d031-20261028\",\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 84f884ed8..f23d004a4 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-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"}
+{"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-193d031-20261028","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-193d031-20261028\",\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 c458fa493..1048d525c 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 b43a42d1f..b91e0ede8 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 b607fe43b..72f6d3ed4 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-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"}
+{"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-193d031-20261028","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-193d031-20261028\",\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 52fd33675..59c743ab1 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-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"}
+{"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-193d031-20261028","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-193d031-20261028\",\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 4bac0de63..710ae7038 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-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"}
+{"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-193d031-20261028","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-193d031-20261028\",\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 ece148eb3..3fd952d9c 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-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"}
+{"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-193d031-20261028","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-193d031-20261028\",\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 2ea5d5d37..67d7412ae 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 0945a16b4..9dd8a46ab 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 efcc7128c..4e233e7d4 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 21e374ca2..fedcbb2b8 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 06eb9d6dc..9b6e6d73b 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 df122eb9a..a3a56cf91 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 2bf92ad1b..876385017 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-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 { 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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 ff6934e90..b6f23e0e8 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 c7914974d..6a92240b5 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 febd51064..022fd6ecd 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 ddc8840a4..11b734137 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 439fa705e..4128d6140 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 8ec4c7e49..7060e2699 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 dffad2670..d347c1acb 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 dcca9ff16..7e9cd199b 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 8554036ed..be5bf559b 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 6fc67dfa7..b30377c72 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-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 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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 f75a54198..f39cee7f7 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 4674f504b..55e9709b2 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 31a464e71..1aa6583cf 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 8c23d1f05..47d804d8a 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 5e0a11033..e138a65bd 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 ce0a36b04..da783b4d3 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-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"}
+{"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-193d031-20261028","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-193d031-20261028\",\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 9ef7ddd76..3b769875a 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-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"}
+{"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-193d031-20261028","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-193d031-20261028\",\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 bbe367209..6a4d72ca0 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-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 { 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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 4a9e49569..b33d6dc5e 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 1869de30c..2274aa022 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-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 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-193d031-20261028","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-193d031-20261028\",\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 ca806220c..caae65d99 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-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"}
+{"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-193d031-20261028","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-193d031-20261028\",\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 6a5ea0a40..bf48cbb02 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-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(\"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 10b1b4490..266aadd1e 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 89e2d86eb..d7b2987ae 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 2c6ca496c..a6dd48c91 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 f6860bd6a..327da1390 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 f948445af..d1d21d16d 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 bc6534016..b5d162d6f 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-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 @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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 6bf9dd9ef..88f240d49 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 ff227c002..75c97f7a6 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 50cf5e51a..2a7b1e3d8 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-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 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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 00e203197..c6b0513d3 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 3c60b492e..471bff489 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-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, 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-193d031-20261028","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-193d031-20261028\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 2f9c30af6..81ded9d28 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-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)"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 8d1a3906e..30f5aa5ec 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-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(\"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 4c4a49884..fafadc671 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-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(\"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 476b2c5f6..95878f971 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 a20beda39..e94143257 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 5403d2cf9..764d87b7a 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 65ce4f023..70a613d87 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 6151b317c..184d72115 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 da7b04636..c666709af 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-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 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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 caacb08d6..17f4515cf 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 a86e140fd..03728999d 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 7c0355365..41fbb082f 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 ab2d1ea30..e745ca134 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-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)"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 4b5cdeecd..fe9cc502e 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-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(\"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 00ce82a56..762a57ba9 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 92f70358c..87d959218 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 838e3931c..935840303 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 0dfa78c98..91870db4c 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 3fffa2cae..c92350f84 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 846f3c6d7..8f0a59915 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 5f912da16..d4d3bca36 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-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\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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 4f7da95bb..116e60bce 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 0143842da..8de98d4a3 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 03cb12bd0..55da26a02 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 4c47b8f4c..3ffde6094 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 a2888b893..0e80ffa84 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 5e7b73e3d..e01c48059 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 66b9c084d..24a6216ea 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 601519d01..1ab5bcce7 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 f83e2fc6b..f096271fb 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 aaa055a94..11fe5cffa 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 56c4b7c6f..3858cccbd 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-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 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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 51352487b..0983d9646 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 8c69b130c..6a28ae9de 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 2d27f2dc0..d86d9ae26 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 35d71dafd..b8d7de9fa 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 ba7c8d547..b395d9436 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 39d84f7b6..d46f43142 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 00100b8ef..8b31f43e0 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 37362d100..3e4b3c505 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 0935b4e27..cab962fc0 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 6b19e4abc..ea74ab77a 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 25423aa5c..79ece1f60 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 778afce7d..6dd155bf6 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 22cf60faf..204ea6ace 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 5c8df7187..1f33892ff 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-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 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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 4d8cd9e7a..78313ec22 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-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(\"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 d70861161..d219e1953 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 caf6309d4..7f2674cd2 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 0f65a6021..b7eeb0b02 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 ed2463db4..dca7b5ce6 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 68e621542..71385c62d 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 89bc4c756..34ada17dd 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 89f2ce12c..2b2705d16 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 8627dd9a1..7cb3fe661 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 27d534a5b..eb83aa4ab 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 3c3e0eb04..b41fc7662 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 32402a770..92fc3832f 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 e3299312e..6ca9b7039 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-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 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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 aea5a5976..e3afc9503 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 c58817d56..03c1e720e 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 b4238b05c..4f6ee8330 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 1d9868cb0..ca5fbf70d 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 e531f7837..d6e58e916 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 f6ea3b8d0..f8d973ade 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-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';\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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 bac3cc231..aae370bea 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 b71c64f60..3c288a19f 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 3335a067a..869ab23b2 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 bac18f33f..b4af2b9a7 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 5f5226f82..3357bcb9c 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 07f5b9dd9..52cf85d40 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 c2bb79372..fc487884f 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 7ae1ac887..403342154 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-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 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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 033082469..2e382ff1e 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 116f5b83c..4899c067e 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 6931968e7..a8887ac6a 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 ea374fb25..2eb08d070 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 164923ce7..170995265 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 fea1cb03b..811845bad 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 3210de2a5..4aa60ad43 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 adac44422..13cde7eab 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 997402362..3003a44b6 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 84db9fde7..74156f373 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-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 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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 74e6661ab..aff762cab 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 908b29f0a..b8adad3c9 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 067e84c81..eb9cd5f8b 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 43157b700..8ccf4462d 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 fad31b270..7754bef21 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 760430b83..146db1e8f 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 f146f8154..772f54a2d 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 f8d32a14e..77252495c 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-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 { 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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 92ecbd237..d62d23ae6 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 9957b2d4c..ff818e272 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 56637c695..756cca0c7 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 09fd49c51..912f2470e 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-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)"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 ce816c167..8bee1e976 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 88f31107f..42d2d2f32 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 fb34fe36e..3f7428386 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 b3ca2918d..9d757d96f 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 94e8fed3a..d612630e1 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 a575e91ad..50a74c5c1 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 0d63d2294..96665b60a 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 8421699ba..e85617ff6 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 47389c3d6..388d15453 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 ec652a5c0..57502abef 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 9624e53b5..492a53ed7 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 bc3337ed2..efef3230c 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 904a7355a..af201aaed 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 e91df958f..9696d3e98 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 d195d006a..7ea84e9b5 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 0033e27b3..cac8b7a96 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 9160134fe..043848895 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 3c818b1d0..0caf3bd77 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 1e41aa4c1..72c39978e 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 f3405884f..1b342c1e2 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-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 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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 59d35ac06..c27c44aa4 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 694d2e3a5..8b7404e1a 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 2ec54b923..a7229e61d 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 bfb2b75fe..4853cdd12 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 a630dacef..adca74a38 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 edb363fc3..12c831acd 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 43d97a8c9..726b052f9 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 b97157d5f..325d82975 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 993e36d92..2b338e990 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-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 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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 0c6ac262d..4ea7c98e9 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 14aca2dc6..e11bca11a 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 935f814de..f5772bd08 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 cf309650f..aa98a4a4e 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 cdf93e269..be17a4722 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 6a4259339..1f2b31c9a 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 48bf76b6b..5d94b3caa 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 17f8e9951..18782bd27 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 63a438a55..5991550c7 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 d26d1003b..ad691a1e5 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-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 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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 15bd07774..5b60f4e26 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 7562ba10f..3322fb817 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-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"}
+{"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-193d031-20261028","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/vue3\": \"0.0.0-next-193d031-20261028\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 e20b5b6ee..ed4440fdd 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 ac42ac2db..a7ae685e1 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-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"}
+{"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-193d031-20261028","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-193d031-20261028\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 27c74f280..ca7936e47 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 a133ac042..26eac6a68 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 b31d3b0da..8f2802458 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 797dd35e7..719706e2b 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-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"}
+{"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-193d031-20261028","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-193d031-20261028\",\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 459f27bda..f6a748a6c 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-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 { 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