(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 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 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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 de8c54b4b..a11f60fd9 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 1c0c22c03..a9de883c9 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 f492e4405..3d80dfbfd 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 8534ff945..3f9e9a1c9 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 975ffd5ee..54930445b 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 16da7ce13..2956e3b4b 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 446769e22..2284f2638 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 534d515e9..d677926d4 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 a2ccd1d2b..53b8f7231 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 9406a2ed4..0ca1d821d 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 27ae869df..039273883 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 9358bde88..db0be6064 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 96ae23427..00e76d323 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-53ad929-20260908","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-53ad929-20260908\",\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-5680ec8-20260909","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-5680ec8-20260909\",\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 5e63de9e3..2a7fe617b 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-53ad929-20260908","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-53ad929-20260908\",\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-5680ec8-20260909","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-5680ec8-20260909\",\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 3b5fe4f8d..99acdfaa8 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 a3b94ee0c..2efaf3d95 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 7223a721f..b1234996a 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-53ad929-20260908","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-53ad929-20260908\",\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-5680ec8-20260909","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-5680ec8-20260909\",\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 896354118..a38e225cf 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-53ad929-20260908","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-53ad929-20260908\",\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-5680ec8-20260909","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-5680ec8-20260909\",\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 2a53323dc..0d5d70f27 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-53ad929-20260908","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-53ad929-20260908\",\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-5680ec8-20260909","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-5680ec8-20260909\",\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 19eb6787a..7a8393f99 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-53ad929-20260908","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-53ad929-20260908\",\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-5680ec8-20260909","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-5680ec8-20260909\",\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 02de2b54a..20a3d1730 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 46f4f4a43..d4455f97f 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 50e1cf750..852297bb6 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 6ae3370bb..42a80b150 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 7518f88bb..4b8849905 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 341f33aaa..f25c69b8a 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 4eea385d2..b31629839 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 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 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 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 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 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 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 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 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 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 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 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 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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 234e154bd..ec2879cbe 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 afcc40591..2660b438c 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 91e17c259..9c12451c7 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 3b06db640..742bc45fa 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 4007326f0..ae7f2d88f 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 8ed652032..25f01ac2b 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 41effeda1..9268edeef 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 6c3dda65b..97f28884b 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 c020f83ae..67cc1a5d9 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 d3e67e4f5..d2994590d 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 7c47ff51b..b5f7e983f 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 42ec9ff60..4b79c644d 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 9a6bcf2b1..b22eacc3b 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 679ae583b..0056edb66 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 e40edecc1..e27fe5824 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 a11e548e1..7e3ec0472 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-53ad929-20260908","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-53ad929-20260908\",\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-5680ec8-20260909","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-5680ec8-20260909\",\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 80543a8f1..8a0ead2e5 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-53ad929-20260908","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-53ad929-20260908\",\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-5680ec8-20260909","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-5680ec8-20260909\",\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 3a94b8e7b..4027f1cd3 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 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 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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 81d5ed86f..9d9cdbfdc 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 a0b3df1e1..bac1872ee 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","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-5680ec8-20260909\",\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 b57fb9d71..821c72a43 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-53ad929-20260908","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-53ad929-20260908\",\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-5680ec8-20260909","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-5680ec8-20260909\",\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 8ba5d1535..dee3b69f2 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-53ad929-20260908","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-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 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 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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 64154e605..fba2920e3 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 }\n\n ngAfterViewInit() {\n this.hotSettings = {\n colWidths: [200, 400, 80],\n colHeaders: ['Title', 'Description', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'cover', renderer: CoverRendererComponent },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example1.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-renderer","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 }\n\n ngAfterViewInit() {\n this.hotSettings = {\n colWidths: [200, 400, 80],\n colHeaders: ['Title', 'Description', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'cover', renderer: CoverRendererComponent },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example1.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/cell-renderer","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example2.ts.json
index efdb5bd70..73a5d2b42 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 282923ccf..937f536ec 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 e6afa61a2..d9be6a7a5 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 }\n\n ngAfterViewInit() {\n this.hotSettings = {\n colWidths: [200, 400, 80],\n colHeaders: ['Title', 'Description', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'cover', renderer: coverRenderer },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example4.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Declare a custom renderer as a function (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 }\n\n ngAfterViewInit() {\n this.hotSettings = {\n colWidths: [200, 400, 80],\n colHeaders: ['Title', 'Description', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'cover', renderer: coverRenderer },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example4.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example4","exampleTitle":"Declare a custom renderer as a function (2)","docPermalink":"/cell-renderer","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example5.ts.json
index b3e2fe6a4..30e875194 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 ngAfterViewInit() {\n this.hotSettings = {\n colWidths: [200, 200, 200, 80],\n colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'comments', renderer: safeHtmlRenderer },\n { data: 'cover', renderer: coverRenderer },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example5.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example5","exampleTitle":"Render custom HTML in cells","docPermalink":"/cell-renderer","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Functions ▸ Cell renderer · Render custom HTML in cells · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 ngAfterViewInit() {\n this.hotSettings = {\n colWidths: [200, 200, 200, 80],\n colHeaders: ['Title', 'Description', 'Comments', 'Cover'],\n height: 'auto',\n columns: [\n { data: 'title', renderer: 'html' },\n { data: 'description', renderer: 'html' },\n { data: 'comments', renderer: safeHtmlRenderer },\n { data: 'cover', renderer: coverRenderer },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-functions/cell-renderer/angular/example5.ts","breadcrumb":["Cell Functions","Cell renderer"],"guide":"guides/cell-functions/cell-renderer/cell-renderer.md","guideTitle":"Cell renderer","exampleId":"example5","exampleTitle":"Render custom HTML in cells","docPermalink":"/cell-renderer","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-functions__cell-renderer__angular__example6.ts.json
index 7e8fade66..cceb63b81 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 7b603c783..7c205ab3c 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 4f36360d7..69a989778 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 0be59e9e1..bf864eb9e 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 de3c5735f..ca2bd86cf 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 88209d1ca..f6f685836 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 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-5680ec8-20260909","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-5680ec8-20260909\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 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 562b50a39..ec001e771 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 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 a7e396e45..8dffec835 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 ce48d96a1..2418f21c4 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 e25fe3efd..ff4c4d045 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 a0a8f689d..484ae544f 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 3b88ba8ec..3059fb56f 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 5af6091c4..5172bc1b7 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 63d2004ab..9122e6459 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 322d881f4..955637758 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 eb313e8c8..6b83c7b93 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 c05834382..7300b2fa0 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 cb4dc36b5..aaf2a8a2d 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 5e1b25cad..4cab61370 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 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 cd51db412..dac7d2c7e 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 f51e64b03..f453cff65 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 2a93739b1..5523109d7 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 2357e8937..27c26e336 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 8286fc66f..310e1b179 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 c00f40b6e..73e92e6cd 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 colors = [\n 'yellow',\n 'red',\n 'orange and another color',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\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 ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n type: 'autocomplete',\n source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],\n strict: false,\n },\n { type: 'numeric' },\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\n visibleRows: 4,\n },\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\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/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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 colors = [\n 'yellow',\n 'red',\n 'orange and another color',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\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 ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n type: 'autocomplete',\n source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],\n strict: false,\n },\n { type: 'numeric' },\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\n visibleRows: 4,\n },\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\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/autocomplete-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autocomplete-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__angular__example2.ts.json
index 871a396bd..4861cea54 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 colors = [\n 'yellow',\n 'red',\n 'orange and another color',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\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 ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n sanitizer: sanitizeHeader,\n colHeaders: [\n 'CarHandsontable 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 colors = [\n 'yellow',\n 'red',\n 'orange and another color',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\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 ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n sanitizer: sanitizeHeader,\n colHeaders: [\n 'CarHandsontable 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 ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\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 {}, // Year is a default text column\n {}, // Chassis color is a default text column\n {}, // Bumper color 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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\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 {}, // Year is a default text column\n {}, // Chassis color is a default text column\n {}, // Bumper color 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 c9906a735..db5fb6db8 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 45fe33c1b..8e434e356 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 9b54ce1e1..0c6727490 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 55196ae39..f15d396b3 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 3ed62c20b..9b4160d1e 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 13ba917c2..ec19704da 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 813c93e6a..f61b1d273 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 'yellow',\n 'red',\n 'orange and another color',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\n];\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'autocomplete',\n source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],\n strict: false,\n },\n { type: 'numeric' },\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\n visibleRows: 4,\n },\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\n trimDropdown: false,\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 'yellow',\n 'red',\n 'orange and another color',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\n];\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'autocomplete',\n source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],\n strict: false,\n },\n { type: 'numeric' },\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\n visibleRows: 4,\n },\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\n trimDropdown: false,\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 250cf3f00..fb423fa27 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 'yellow',\n 'red',\n 'orange and another color',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'autocomplete',\n source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],\n strict: false,\n },\n { type: 'numeric' },\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\n visibleRows: 4,\n },\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\n trimDropdown: false,\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 'yellow',\n 'red',\n 'orange and another color',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'autocomplete',\n source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],\n strict: false,\n },\n { type: 'numeric' },\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\n visibleRows: 4,\n },\n {\n type: 'autocomplete',\n source: colors,\n strict: false,\n trimDropdown: false,\n },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/autocomplete-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Autocomplete cell type"],"guide":"guides/cell-types/autocomplete-cell-type/autocomplete-cell-type.md","guideTitle":"Autocomplete cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/autocomplete-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__javascript__example2.js.json
index 0d83c1304..9c8d3687b 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 'yellow',\n 'red',\n 'orange',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\n];\n\nconst cars = ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'];\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 ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['CarHandsontable 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 'yellow',\n 'red',\n 'orange',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\n];\n\nconst cars = ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'];\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 ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['CarHandsontable 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 'yellow',\n 'red',\n 'orange',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\n];\n\nconst cars: string[] = ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'];\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 ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['CarHandsontable 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 'yellow',\n 'red',\n 'orange',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\n];\n\nconst cars: string[] = ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'];\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 ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['CarHandsontable 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 ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\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 {},\n {},\n {}, // Bumper color 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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\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 {},\n {},\n {}, // Bumper color 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 4e5b01eee..a1e90eec0 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\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 {}, // Year is a default text column\n {}, // Chassis color is a default text column\n {}, // Bumper color 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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 ['BMW', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\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 {}, // Year is a default text column\n {}, // Chassis color is a default text column\n {}, // Bumper color 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 932332e2c..6b1431f9e 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 fddc3a412..a0274d8f4 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 074b1c5b6..341d9090f 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 b753d0884..9025a071b 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 4cfb58545..66b7e1339 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 457614eea..49189318d 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 868c55405..b024104eb 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 03615abb2..20a76af9d 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 a12e3b750..6dc8141cf 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 fa966526c..3b63f7fc7 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 baffc625c..d876cf473 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 9cebdb328..b46cf0a37 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 753eb7388..14b351bdd 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 ExampleComponent = () => {\n const colors = [\n 'yellow',\n 'red',\n 'orange and another color',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\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 ExampleComponent = () => {\n const colors = [\n 'yellow',\n 'red',\n 'orange and another color',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\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 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 ExampleComponent = () => {\n const colors = [\n 'yellow',\n 'red',\n 'orange',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\n ];\n\n const cars = ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'];\n\n return (\n (allowInvalid true)', 'Year', 'Chassis color', 'Bumper colorHandsontable 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 ExampleComponent = () => {\n const colors = [\n 'yellow',\n 'red',\n 'orange',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n 'purple',\n 'lime',\n 'olive',\n 'cyan',\n ];\n\n const cars = ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'];\n\n return (\n (allowInvalid true)', 'Year', 'Chassis color', 'Bumper colorHandsontable 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 return (\n response.json())\n .then((response) => process(response.data));\n },\n strict: true,\n },\n {}, // Year is a default text column\n {}, // Chassis color is a default text column\n {}, // Bumper color 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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 ExampleComponent = () => {\n return (\n response.json())\n .then((response) => process(response.data));\n },\n strict: true,\n },\n {}, // Year is a default text column\n {}, // Chassis color is a default text column\n {}, // Bumper color 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 36cc3d274..289dd0e96 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 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 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 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 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 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 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 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 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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__autocomplete-cell-type__vue__example2.vue.json
index eb4826dda..84f20aabf 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 a0905a660..c7d3a1cfb 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 b2198ca94..b442bb575 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 cfea721c4..3d355f81d 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 2d3cb1c26..ace017f09 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 7e4ab453a..4f57ff4f9 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 8023ad7c1..6b50f629b 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 67cbd94d6..42016344b 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 72cff69e1..535516a78 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 375be42b0..c8ddf33e6 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 b026398c7..7f5c10501 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 0be9b4c9c..045e2ddb2 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 bb63449f7..d4cc6f856 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 5e3506dc5..2e2ac7903 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 6ff352058..3be8d4d91 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 195f4e5e0..ab6353258 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 94ad6ba74..eb1accf81 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 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 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 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 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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 4c971e189..c00a24448 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 d88381035..fc9061e9a 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 23854bf0c..d9fb86269 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 f2cb6c203..5ef593d45 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 1cbf9ece4..f164ebf8b 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 3e97097b3..73f1deae1 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 e76e6f608..1d95857b6 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example1.js.json
index 8905eb3dc..6413f98ff 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Checkbox cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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"}
+{"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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 19e057ecd..64883a3b4 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 ea6318249..63a15bcc1 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 00328e845..6f094e22a 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 bd5fad633..386dff833 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 4e0fac193..91d021002 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 bfd818ffd..dfa747bea 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 ac4471767..5dd40b726 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__checkbox-cell-type__react__example1.tsx.json
index 38feed412..2150bb096 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 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 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 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 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 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 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 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 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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 c5bf5f910..01104b292 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 0bd7ec4a1..74f3b0346 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 5de789ef4..23052946c 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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__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 5cad5bbe8..d05e33681 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-SP', label: 'Serbian Latin (Serbia)' },\n { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n ];\n\n readonly data: CarData[] = [\n {\n car: 'Mercedes A 160',\n product_date: '2002-06-15',\n payment_date: '2002-05-20',\n registration_date: '2002-07-01',\n },\n {\n car: 'Citroën C4 Coupe',\n product_date: '2007-03-22',\n payment_date: '2007-02-28',\n registration_date: '2007-04-10',\n },\n {\n car: 'Audi A4 Avant',\n product_date: '2011-09-08',\n payment_date: '2011-08-15',\n registration_date: '2011-09-20',\n },\n {\n car: 'Opel Astra',\n product_date: '2012-01-30',\n payment_date: '2012-01-10',\n registration_date: '2012-02-14',\n },\n {\n car: 'BMW 320i Coupe',\n product_date: '2004-11-12',\n payment_date: '2004-10-20',\n registration_date: '2004-12-01',\n },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Car', 'Product date', 'Payment date', 'Registration date'],\n locale: this.locale,\n columns: [\n {\n type: 'text',\n data: 'car',\n },\n {\n type: 'intl-date',\n data: 'product_date',\n dateFormat: { dateStyle: 'short' },\n },\n {\n type: 'intl-date',\n data: 'payment_date',\n dateFormat: {\n month: 'long',\n day: 'numeric',\n year: 'numeric',\n },\n },\n {\n type: 'intl-date',\n data: 'registration_date',\n dateFormat: {\n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n },\n },\n ],\n columnSorting: true,\n filters: true,\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n get selectedLabel(): string {\n return this.localeOptions.find((o) => o.value === this.locale)?.label || '';\n }\n\n private elementRef = inject(ElementRef);\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n selectLocale(value: string): void {\n this.locale = value;\n this.isOpen = false;\n this.hotTable?.hotInstance?.updateSettings({ locale: this.locale });\n }\n\n @HostListener('document:click', ['$event'])\n onDocumentClick(event: MouseEvent): void {\n if (!this.elementRef.nativeElement.querySelector('.theme-dropdown')?.contains(event.target)) {\n this.isOpen = false;\n }\n }\n\n @HostListener('document:keydown', ['$event'])\n onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/date-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Date cell type"],"guide":"guides/cell-types/date-cell-type/date-cell-type.md","guideTitle":"Date cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/date-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Date cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-SP', label: 'Serbian Latin (Serbia)' },\n { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n ];\n\n readonly data: CarData[] = [\n {\n car: 'Mercedes A 160',\n product_date: '2002-06-15',\n payment_date: '2002-05-20',\n registration_date: '2002-07-01',\n },\n {\n car: 'Citroën C4 Coupe',\n product_date: '2007-03-22',\n payment_date: '2007-02-28',\n registration_date: '2007-04-10',\n },\n {\n car: 'Audi A4 Avant',\n product_date: '2011-09-08',\n payment_date: '2011-08-15',\n registration_date: '2011-09-20',\n },\n {\n car: 'Opel Astra',\n product_date: '2012-01-30',\n payment_date: '2012-01-10',\n registration_date: '2012-02-14',\n },\n {\n car: 'BMW 320i Coupe',\n product_date: '2004-11-12',\n payment_date: '2004-10-20',\n registration_date: '2004-12-01',\n },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Car', 'Product date', 'Payment date', 'Registration date'],\n locale: this.locale,\n columns: [\n {\n type: 'text',\n data: 'car',\n },\n {\n type: 'intl-date',\n data: 'product_date',\n dateFormat: { dateStyle: 'short' },\n },\n {\n type: 'intl-date',\n data: 'payment_date',\n dateFormat: {\n month: 'long',\n day: 'numeric',\n year: 'numeric',\n },\n },\n {\n type: 'intl-date',\n data: 'registration_date',\n dateFormat: {\n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n },\n },\n ],\n columnSorting: true,\n filters: true,\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n get selectedLabel(): string {\n return this.localeOptions.find((o) => o.value === this.locale)?.label || '';\n }\n\n private elementRef = inject(ElementRef);\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n selectLocale(value: string): void {\n this.locale = value;\n this.isOpen = false;\n this.hotTable?.hotInstance?.updateSettings({ locale: this.locale });\n }\n\n @HostListener('document:click', ['$event'])\n onDocumentClick(event: MouseEvent): void {\n if (!this.elementRef.nativeElement.querySelector('.theme-dropdown')?.contains(event.target)) {\n this.isOpen = false;\n }\n }\n\n @HostListener('document:keydown', ['$event'])\n onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/date-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Date cell type"],"guide":"guides/cell-types/date-cell-type/date-cell-type.md","guideTitle":"Date cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/date-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__date-cell-type__javascript__example1.js.json
index c11d1c5bf..63e90d088 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 3fdd70893..3f565ac9f 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 8b43e7a20..e2a6c40d2 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-SP', label: 'Serbian Latin (Serbia)' },\n { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n];\n\nconst ExampleComponent = () => {\n const hotRef = useRef(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-SP', label: 'Serbian Latin (Serbia)' },\n { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n];\n\nconst ExampleComponent = () => {\n const hotRef = useRef(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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 41c733b89..829e077a7 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 00f861aba..859b4cdc0 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 c58f23bff..f3e1356be 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 8f073c9f5..22276ecb3 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 069e85e69..335617095 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 d66c51cb8..932fdd6dd 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {},\n { type: 'numeric' },\n {\n type: 'dropdown',\n source: [\n 'yellow',\n 'red',\n 'orange',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n ],\n },\n {\n type: 'dropdown',\n source: [\n 'yellow',\n 'red',\n 'orange',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {},\n { type: 'numeric' },\n {\n type: 'dropdown',\n source: [\n 'yellow',\n 'red',\n 'orange',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\n ],\n },\n {\n type: 'dropdown',\n source: [\n 'yellow',\n 'red',\n 'orange',\n 'green',\n 'blue',\n 'gray',\n 'black',\n 'white',\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 772cdacae..218b4b02e 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 9f8658337..6582bf354 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 0ac66b6cb..b8b6c327f 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 29907a492..5b2140b3d 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__javascript__example1.js.json
index 05636b7b4..3c41859b4 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {},\n { type: 'numeric' },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {},\n { type: 'numeric' },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\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 f1dcbad31..dd957ce94 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {},\n { type: 'numeric' },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {},\n { type: 'numeric' },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\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 f7ba64f5c..8e76b4659 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 d01e67d23..af4d63c13 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 34f0eece7..6c690133b 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 57c0d3b7f..23db64021 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 a8134c4b7..95c826b9f 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 e1154d4e7..8a9f0eb45 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 a5406016c..e00e53c23 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 ced117cc7..8c0c3118e 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__dropdown-cell-type__react__example1.tsx.json
index 9a10bc72e..1dca718d3 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 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 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 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 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 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 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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 8dc29bb22..e8ff9a93e 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 0e7fe851f..55e3bf33c 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 0e6a80908..f14eafc96 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 583482ae4..1cfdd342b 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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__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 ac76acde3..f4e1d22f1 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 manufacturerData = [\n { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },\n { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },\n { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },\n { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },\n { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },\n { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },\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 ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Marque', 'Country', 'Parent company'],\n autoColumnSize: true,\n data: manufacturerData,\n getValue() {\n const selection = this.getSelectedLast();\n\n // Get the manufacturer 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 { type: 'numeric' },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 manufacturerData = [\n { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },\n { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },\n { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },\n { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },\n { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },\n { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },\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 ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Marque', 'Country', 'Parent company'],\n autoColumnSize: true,\n data: manufacturerData,\n getValue() {\n const selection = this.getSelectedLast();\n\n // Get the manufacturer 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 { type: 'numeric' },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\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 d27a3cc44..714d33994 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 manufacturerData = [\n { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },\n { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },\n { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },\n { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },\n { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },\n { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },\n];\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Marque', 'Country', 'Parent company'],\n autoColumnSize: true,\n data: manufacturerData,\n getValue() {\n const selection = this.getSelectedLast();\n // Get the manufacturer name of the clicked row and ignore header\n // coordinates (negative values)\n const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0));\n return row.name;\n },\n },\n },\n { type: 'numeric' },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 manufacturerData = [\n { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },\n { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },\n { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },\n { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },\n { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },\n { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },\n];\nconst container = document.querySelector('#example1');\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Marque', 'Country', 'Parent company'],\n autoColumnSize: true,\n data: manufacturerData,\n getValue() {\n const selection = this.getSelectedLast();\n // Get the manufacturer name of the clicked row and ignore header\n // coordinates (negative values)\n const row = this.getSourceDataAtRow(Math.max(selection?.[0] ?? 0, 0));\n return row.name;\n },\n },\n },\n { type: 'numeric' },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\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 81f328cca..c92fad935 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 Manufacturer {\n name: string;\n country: string;\n owner: string;\n}\n\nconst manufacturerData: Manufacturer[] = [\n { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },\n { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },\n { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },\n { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },\n { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },\n { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Marque', 'Country', 'Parent company'],\n autoColumnSize: true,\n data: manufacturerData,\n getValue() {\n const selection = this.getSelectedLast();\n\n // Get the manufacturer 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 { type: 'numeric' },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 Manufacturer {\n name: string;\n country: string;\n owner: string;\n}\n\nconst manufacturerData: Manufacturer[] = [\n { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },\n { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },\n { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },\n { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },\n { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },\n { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },\n];\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n data: [\n ['Tesla', 2017, 'black', 'black'],\n ['Nissan', 2018, 'blue', 'blue'],\n ['Chrysler', 2019, 'yellow', 'black'],\n ['Volvo', 2020, 'white', 'gray'],\n ],\n colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],\n columns: [\n {\n type: 'handsontable',\n handsontable: {\n colHeaders: ['Marque', 'Country', 'Parent company'],\n autoColumnSize: true,\n data: manufacturerData,\n getValue() {\n const selection = this.getSelectedLast();\n\n // Get the manufacturer 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 { type: 'numeric' },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\n },\n {\n type: 'dropdown',\n source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'],\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 0ad813a94..15d400675 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 ExampleComponent = () => {\n const manufacturerData = [\n { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },\n { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },\n { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },\n { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },\n { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },\n { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },\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 ExampleComponent = () => {\n const manufacturerData = [\n { name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG' },\n { name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC' },\n { name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd' },\n { name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation' },\n { name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation' },\n { name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group' },\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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 5b86836c2..bbc6858d5 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 7e1dc2db6..5a462a561 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 6cc300fa6..170c669eb 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 c74020921..8068ad292 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 a8e3bf67a..214a13b62 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 a5154aaa5..b39b84e61 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 3ce319a01..e1a474900 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 3f8f7a428..e202e3259 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 d97eeb62a..7c9bf09c1 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 7966ec2a1..a3858c479 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 30734af8d..1838b3974 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 01b54e034..95a7e93da 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 1051c1b86..5e49d6def 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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-SP', label: 'Serbian Latin (Serbia)' },\n { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n ];\n\n readonly data: CarData[] = [\n {\n car: 'Mercedes A 160',\n year: 2017,\n price_usd: 7000,\n price_eur: 7000,\n distance_km: 125000,\n fuel_liters: 45.5,\n discount_percent: 0.15,\n quantity: 1250\n },\n {\n car: 'Citroen C4 Coupe',\n year: 2018,\n price_usd: 8330,\n price_eur: 8330,\n distance_km: 98000,\n fuel_liters: 52.3,\n discount_percent: 0.08,\n quantity: 2100\n },\n {\n car: 'Audi A4 Avant',\n year: 2019,\n price_usd: 33900,\n price_eur: 33900,\n distance_km: 45000,\n fuel_liters: 60.0,\n discount_percent: 0.05,\n quantity: 850\n },\n {\n car: 'Opel Astra',\n year: 2020,\n price_usd: 5000,\n price_eur: 5000,\n distance_km: 156000,\n fuel_liters: 48.7,\n discount_percent: 0.12,\n quantity: 3200\n },\n {\n car: 'BMW 320i Coupe',\n year: 2021,\n price_usd: 30500,\n price_eur: 30500,\n distance_km: 32000,\n fuel_liters: 55.2,\n discount_percent: 0.03,\n quantity: 1500\n },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Car', 'Year', 'Price (USD)', 'Price (EUR)', 'Distance', 'Fuel', 'Discount', 'Quantity'],\n locale: this.locale,\n columnSorting: true,\n filters: true,\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n data: 'car',\n type: 'text',\n },\n {\n data: 'year',\n type: 'numeric',\n },\n {\n data: 'price_usd',\n type: 'numeric',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n data: 'price_eur',\n type: 'numeric',\n numericFormat: {\n style: 'currency',\n currency: 'EUR',\n minimumFractionDigits: 2,\n },\n },\n {\n data: 'distance_km',\n type: 'numeric',\n numericFormat: {\n style: 'unit',\n unit: 'kilometer',\n useGrouping: true,\n },\n },\n {\n data: 'fuel_liters',\n type: 'numeric',\n numericFormat: {\n style: 'unit',\n unit: 'liter',\n minimumFractionDigits: 1,\n maximumFractionDigits: 1,\n },\n },\n {\n data: 'discount_percent',\n type: 'numeric',\n numericFormat: {\n style: 'percent',\n minimumFractionDigits: 0,\n maximumFractionDigits: 2,\n },\n },\n {\n data: 'quantity',\n type: 'numeric',\n numericFormat: {\n style: 'decimal',\n useGrouping: true,\n minimumFractionDigits: 0,\n },\n },\n ]\n };\n\n get selectedLabel(): string {\n return this.localeOptions.find((o) => o.value === this.locale)?.label || '';\n }\n\n private elementRef = inject(ElementRef);\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n selectLocale(value: string): void {\n this.locale = value;\n this.isOpen = false;\n this.hotTable?.hotInstance?.updateSettings({ locale: this.locale });\n }\n\n @HostListener('document:click', ['$event'])\n onDocumentClick(event: MouseEvent): void {\n if (!this.elementRef.nativeElement.querySelector('.theme-dropdown')?.contains(event.target)) {\n this.isOpen = false;\n }\n }\n\n @HostListener('document:keydown', ['$event'])\n onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/numeric-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/numeric-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Numeric cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-SP', label: 'Serbian Latin (Serbia)' },\n { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n ];\n\n readonly data: CarData[] = [\n {\n car: 'Mercedes A 160',\n year: 2017,\n price_usd: 7000,\n price_eur: 7000,\n distance_km: 125000,\n fuel_liters: 45.5,\n discount_percent: 0.15,\n quantity: 1250\n },\n {\n car: 'Citroen C4 Coupe',\n year: 2018,\n price_usd: 8330,\n price_eur: 8330,\n distance_km: 98000,\n fuel_liters: 52.3,\n discount_percent: 0.08,\n quantity: 2100\n },\n {\n car: 'Audi A4 Avant',\n year: 2019,\n price_usd: 33900,\n price_eur: 33900,\n distance_km: 45000,\n fuel_liters: 60.0,\n discount_percent: 0.05,\n quantity: 850\n },\n {\n car: 'Opel Astra',\n year: 2020,\n price_usd: 5000,\n price_eur: 5000,\n distance_km: 156000,\n fuel_liters: 48.7,\n discount_percent: 0.12,\n quantity: 3200\n },\n {\n car: 'BMW 320i Coupe',\n year: 2021,\n price_usd: 30500,\n price_eur: 30500,\n distance_km: 32000,\n fuel_liters: 55.2,\n discount_percent: 0.03,\n quantity: 1500\n },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Car', 'Year', 'Price (USD)', 'Price (EUR)', 'Distance', 'Fuel', 'Discount', 'Quantity'],\n locale: this.locale,\n columnSorting: true,\n filters: true,\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {\n data: 'car',\n type: 'text',\n },\n {\n data: 'year',\n type: 'numeric',\n },\n {\n data: 'price_usd',\n type: 'numeric',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n data: 'price_eur',\n type: 'numeric',\n numericFormat: {\n style: 'currency',\n currency: 'EUR',\n minimumFractionDigits: 2,\n },\n },\n {\n data: 'distance_km',\n type: 'numeric',\n numericFormat: {\n style: 'unit',\n unit: 'kilometer',\n useGrouping: true,\n },\n },\n {\n data: 'fuel_liters',\n type: 'numeric',\n numericFormat: {\n style: 'unit',\n unit: 'liter',\n minimumFractionDigits: 1,\n maximumFractionDigits: 1,\n },\n },\n {\n data: 'discount_percent',\n type: 'numeric',\n numericFormat: {\n style: 'percent',\n minimumFractionDigits: 0,\n maximumFractionDigits: 2,\n },\n },\n {\n data: 'quantity',\n type: 'numeric',\n numericFormat: {\n style: 'decimal',\n useGrouping: true,\n minimumFractionDigits: 0,\n },\n },\n ]\n };\n\n get selectedLabel(): string {\n return this.localeOptions.find((o) => o.value === this.locale)?.label || '';\n }\n\n private elementRef = inject(ElementRef);\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n selectLocale(value: string): void {\n this.locale = value;\n this.isOpen = false;\n this.hotTable?.hotInstance?.updateSettings({ locale: this.locale });\n }\n\n @HostListener('document:click', ['$event'])\n onDocumentClick(event: MouseEvent): void {\n if (!this.elementRef.nativeElement.querySelector('.theme-dropdown')?.contains(event.target)) {\n this.isOpen = false;\n }\n }\n\n @HostListener('document:keydown', ['$event'])\n onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/numeric-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/numeric-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__javascript__example1.js.json
index 67b42368a..e78c3842a 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 2b5b3357c..5cfa3aa96 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-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__numeric-cell-type__react__example1.tsx.json
index 41a54bf00..ca262bb14 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-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-SP', label: 'Serbian Latin (Serbia)' },\n { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n];\n\nconst ExampleComponent = () => {\n const hotRef = useRef(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 \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\ninterface CarData {\n car: string;\n year: number;\n price_usd: number;\n price_eur: number;\n distance_km: number;\n fuel_liters: number;\n discount_percent: number;\n quantity: number;\n}\n\nconst localeOptions: { value: string; label: string }[] = [\n { value: 'ar-AR', label: 'Arabic (Global)' },\n { value: 'cs-CZ', label: 'Czech (Czechia)' },\n { value: 'de-CH', label: 'German (Switzerland)' },\n { value: 'de-DE', label: 'German (Germany)' },\n { value: 'en-US', label: 'English (United States)' },\n { value: 'es-MX', label: 'Spanish (Mexico)' },\n { value: 'fa-IR', label: 'Persian (Iran)' },\n { value: 'fr-FR', label: 'French (France)' },\n { value: 'hr-HR', label: 'Croatian (Croatia)' },\n { value: 'it-IT', label: 'Italian (Italy)' },\n { value: 'ja-JP', label: 'Japanese (Japan)' },\n { value: 'ko-KR', label: 'Korean (Korea)' },\n { value: 'lv-LV', label: 'Latvian (Latvia)' },\n { value: 'nb-NO', label: 'Norwegian Bokmal (Norway)' },\n { value: 'nl-NL', label: 'Dutch (Netherlands)' },\n { value: 'pl-PL', label: 'Polish (Poland)' },\n { value: 'pt-BR', label: 'Portuguese (Brazil)' },\n { value: 'ru-RU', label: 'Russian (Russia)' },\n { value: 'sr-SP', label: 'Serbian Latin (Serbia)' },\n { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n];\n\nconst ExampleComponent = () => {\n const hotRef = useRef(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 \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
\n
"},"docsPath":"guides/cell-types/numeric-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/numeric-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Numeric cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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-types/numeric-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Numeric cell type"],"guide":"guides/cell-types/numeric-cell-type/numeric-cell-type.md","guideTitle":"Numeric cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/numeric-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example1.ts.json
index 46b6991be..3874718b7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Password cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-password-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: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password' },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/password-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Password cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-password-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: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password' },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/password-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example2.ts.json
index 942a2e2c1..bb1475520 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Password cell type · Fixed hash length · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-password-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: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashLength: 10 },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/password-cell-type/angular/example2.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Password cell type · Fixed hash length · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-password-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: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashLength: 10 },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/password-cell-type/angular/example2.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example3.ts.json
index f8e3bcd8c..0e8b7388f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-password-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: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashSymbol: '■' },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/password-cell-type/angular/example3.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-password-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: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashSymbol: '■' },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/password-cell-type/angular/example3.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example4.ts.json
index 04990b21b..76aa0db51 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Password cell type · Reveal delay · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-password-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `\n
`,\n})\nexport class AppComponent {\n readonly data = [\n { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashRevealDelay: 1000 },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/password-cell-type/angular/example4.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Password cell type · Reveal delay · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-password-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `\n
`,\n})\nexport class AppComponent {\n readonly data = [\n { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashRevealDelay: 1000 },\n ],\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/password-cell-type/angular/example4.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.js.json
index 96718daeb..abe806f07 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Password cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 {\n id: 1,\n name: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'password', type: 'password' }],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Password cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 {\n id: 1,\n name: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'password', type: 'password' }],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.ts.json
index ab686637d..a0d2b2562 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Password cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 {\n id: 1,\n name: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'password', type: 'password' }],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Password cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 {\n id: 1,\n name: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [{ data: 'id' }, { data: 'name.first' }, { data: 'name.last' }, { data: 'password', type: 'password' }],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.js.json
index 492c9bf7a..2eec76acf 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Password cell type · Fixed hash length · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 {\n id: 1,\n name: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashLength: 10 },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Password cell type · Fixed hash length · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 {\n id: 1,\n name: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashLength: 10 },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.ts.json
index b9904afaa..6a15990a9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Password cell type · Fixed hash length · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 {\n id: 1,\n name: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashLength: 10 },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Password cell type · Fixed hash length · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 {\n id: 1,\n name: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashLength: 10 },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.js.json
index 52d373c4d..bb5116ed4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 {\n id: 1,\n name: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashSymbol: '■' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example3.js","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 {\n id: 1,\n name: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashSymbol: '■' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example3.js","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.ts.json
index 5c8d3bf2c..922e1298d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 {\n id: 1,\n name: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashSymbol: '■' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example3.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 {\n id: 1,\n name: { first: 'Chris', last: 'Right' },\n password: 'plainTextPassword',\n },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashSymbol: '■' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example3.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.js.json
index c4cc30b77..0afa2af14 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Password cell type · Reveal delay · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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');\nnew Handsontable(container, {\n data: [\n { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashRevealDelay: 1000 },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example4.js","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Password cell type · Reveal delay · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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');\nnew Handsontable(container, {\n data: [\n { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashRevealDelay: 1000 },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example4.js","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.ts.json
index de28aefda..81a8244b3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Password cell type · Reveal delay · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashRevealDelay: 1000 },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example4.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Password cell type · Reveal delay · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 { id: 1, name: { first: 'Chris', last: 'Right' }, password: 'plainTextPassword' },\n { id: 2, name: { first: 'John', last: 'Honest' }, password: 'txt' },\n { id: 3, name: { first: 'Greg', last: 'Well' }, password: 'longer' },\n ],\n colHeaders: ['ID', 'First name', 'Last name', 'Password'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'id' },\n { data: 'name.first' },\n { data: 'name.last' },\n { data: 'password', type: 'password', hashRevealDelay: 1000 },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/password-cell-type/javascript/example4.ts","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example1.tsx.json
index 3680808ee..5cb9757d4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Password cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 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 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 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 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 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 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 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 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/password-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Password cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/password-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/password-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example2.vue.json
index 9794fdaba..8bbb134cb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Password cell type · Fixed hash length · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/password-cell-type/vue/example2.vue","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Password cell type · Fixed hash length · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/password-cell-type/vue/example2.vue","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example2","exampleTitle":"Fixed hash length","docPermalink":"/password-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example3.vue.json
index fe854f21c..4a9bc881c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/password-cell-type/vue/example3.vue","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Password cell type · Custom hash symbol · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/password-cell-type/vue/example3.vue","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example3","exampleTitle":"Custom hash symbol","docPermalink":"/password-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example4.vue.json
index db8c4ceda..f9e3acea2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__password-cell-type__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Password cell type · Reveal delay · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/password-cell-type/vue/example4.vue","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Password cell type · Reveal delay · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/password-cell-type/vue/example4.vue","breadcrumb":["Cell Types","Password cell type"],"guide":"guides/cell-types/password-cell-type/password-cell-type.md","guideTitle":"Password cell type","exampleId":"example4","exampleTitle":"Reveal delay","docPermalink":"/password-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__angular__example1.ts.json
index 162cd2863..ef73be78e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Select cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-select-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n
`,\n})\nexport class AppComponent {\n\n readonly data = [\n ['2017', 'Honda', 10],\n ['2018', 'Toyota', 20],\n ['2019', 'Nissan', 30],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colWidths: [70, 90, 80],\n colHeaders: ['Year', 'Make', 'In stock'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {},\n {\n type: 'select',\n selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],\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/select-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Select cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-select-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n
`,\n})\nexport class AppComponent {\n\n readonly data = [\n ['2017', 'Honda', 10],\n ['2018', 'Toyota', 20],\n ['2019', 'Nissan', 30],\n ];\n\n readonly gridSettings: GridSettings = {\n height: 'auto',\n colWidths: [70, 90, 80],\n colHeaders: ['Year', 'Make', 'In stock'],\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n {},\n {\n type: 'select',\n selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],\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/select-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.js.json
index 5c84d0a0e..1b58441cb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Select cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 ['2017', 'Honda', 10],\n ['2018', 'Toyota', 20],\n ['2019', 'Nissan', 30],\n ],\n colWidths: [70, 90, 80],\n colHeaders: ['Year', 'Make', 'In stock'],\n columns: [\n {},\n {\n type: 'select',\n selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],\n },\n {},\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/select-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Select cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 ['2017', 'Honda', 10],\n ['2018', 'Toyota', 20],\n ['2019', 'Nissan', 30],\n ],\n colWidths: [70, 90, 80],\n colHeaders: ['Year', 'Make', 'In stock'],\n columns: [\n {},\n {\n type: 'select',\n selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],\n },\n {},\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/select-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.ts.json
index 4eed51b8f..000ced85f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Select cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 ['2017', 'Honda', 10],\n ['2018', 'Toyota', 20],\n ['2019', 'Nissan', 30],\n ],\n colWidths: [70, 90, 80],\n colHeaders: ['Year', 'Make', 'In stock'],\n columns: [\n {},\n {\n type: 'select',\n selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],\n },\n {},\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/select-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Select cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 ['2017', 'Honda', 10],\n ['2018', 'Toyota', 20],\n ['2019', 'Nissan', 30],\n ],\n colWidths: [70, 90, 80],\n colHeaders: ['Year', 'Make', 'In stock'],\n columns: [\n {},\n {\n type: 'select',\n selectOptions: ['Kia', 'Nissan', 'Toyota', 'Honda'],\n },\n {},\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/select-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__react__example1.tsx.json
index 26d3cb88d..65488f5a3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__select-cell-type__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Select cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 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 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/select-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Select cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/select-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Select cell type"],"guide":"guides/cell-types/select-cell-type/select-cell-type.md","guideTitle":"Select cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/select-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example1.ts.json
index e604d37d5..b4dc8f8c6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Text cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n
`,\n})\nexport class AppComponent {\n\n readonly data = [\n { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['SKU', 'Category code', 'Quantity', 'Unit price ($)'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n { data: 'sku', type: 'text' },\n { data: 'category', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n { data: 'unitPrice', type: 'numeric' },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/text-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Text cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n
`,\n})\nexport class AppComponent {\n\n readonly data = [\n { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['SKU', 'Category code', 'Quantity', 'Unit price ($)'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n { data: 'sku', type: 'text' },\n { data: 'category', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n { data: 'unitPrice', type: 'numeric' },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/text-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example2.ts.json
index 7c6479b1b..bb8b33aa3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Text cell type · Adding a validator · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 skuValidator = (value: unknown, callback: (isValid: boolean) => void) => {\n callback(/^\\d{6}$/.test(String(value)));\n};\n\n@Component({\n selector: 'example2-text-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n
`,\n})\nexport class AppComponent {\n\n readonly data = [\n { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['SKU', 'Supplier', 'Quantity'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n { data: 'supplier', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/text-cell-type/angular/example2.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Text cell type · Adding a validator · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 skuValidator = (value: unknown, callback: (isValid: boolean) => void) => {\n callback(/^\\d{6}$/.test(String(value)));\n};\n\n@Component({\n selector: 'example2-text-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n
`,\n})\nexport class AppComponent {\n\n readonly data = [\n { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['SKU', 'Supplier', 'Quantity'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n columns: [\n { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n { data: 'supplier', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n ]\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/text-cell-type/angular/example2.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.js.json
index d76fb98d3..f2422ecbe 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Text cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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('#example1');\nnew Handsontable(container, {\n data: [\n { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n ],\n colHeaders: ['SKU', 'Category code', 'Quantity', 'Unit price ($)'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'sku', type: 'text' },\n { data: 'category', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n { data: 'unitPrice', type: 'numeric' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Text cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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('#example1');\nnew Handsontable(container, {\n data: [\n { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n ],\n colHeaders: ['SKU', 'Category code', 'Quantity', 'Unit price ($)'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'sku', type: 'text' },\n { data: 'category', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n { data: 'unitPrice', type: 'numeric' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.ts.json
index c284e327f..ce3618bfe 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Text cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n ],\n colHeaders: ['SKU', 'Category code', 'Quantity', 'Unit price ($)'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'sku', type: 'text' },\n { data: 'category', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n { data: 'unitPrice', type: 'numeric' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Text cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 { sku: '004821', category: '032', quantity: 142, unitPrice: 18.5 },\n { sku: '000093', category: '032', quantity: 0, unitPrice: 42.0 },\n { sku: '017640', category: '015', quantity: 67, unitPrice: 9.99 },\n { sku: '002210', category: '015', quantity: 310, unitPrice: 4.25 },\n { sku: '008875', category: '048', quantity: 24, unitPrice: 129.0 },\n ],\n colHeaders: ['SKU', 'Category code', 'Quantity', 'Unit price ($)'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'sku', type: 'text' },\n { data: 'category', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n { data: 'unitPrice', type: 'numeric' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.js.json
index 6a5d5a5bc..9addbd6d9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Text cell type · Adding a validator · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 skuValidator = (value, callback) => {\n callback(/^\\d{6}$/.test(value));\n};\nnew Handsontable(container, {\n data: [\n { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n ],\n colHeaders: ['SKU', 'Supplier', 'Quantity'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n { data: 'supplier', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Text cell type · Adding a validator · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 skuValidator = (value, callback) => {\n callback(/^\\d{6}$/.test(value));\n};\nnew Handsontable(container, {\n data: [\n { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n ],\n colHeaders: ['SKU', 'Supplier', 'Quantity'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n { data: 'supplier', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example2.js","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.ts.json
index 545c038b8..adf9ad457 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Text cell type · Adding a validator · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 skuValidator = (value: string, callback: (isValid: boolean) => void) => {\n callback(/^\\d{6}$/.test(value));\n};\n\nnew Handsontable(container, {\n data: [\n { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n ],\n colHeaders: ['SKU', 'Supplier', 'Quantity'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n { data: 'supplier', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Text cell type · Adding a validator · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 skuValidator = (value: string, callback: (isValid: boolean) => void) => {\n callback(/^\\d{6}$/.test(value));\n};\n\nnew Handsontable(container, {\n data: [\n { sku: '004821', supplier: 'Harbor Goods', quantity: 142 },\n { sku: '000093', supplier: 'Alpine Supply Co.', quantity: 0 },\n { sku: '017640', supplier: 'Harbor Goods', quantity: 67 },\n { sku: '002210', supplier: 'Crestline Wholesale', quantity: 310 },\n { sku: '008875', supplier: 'Alpine Supply Co.', quantity: 24 },\n ],\n colHeaders: ['SKU', 'Supplier', 'Quantity'],\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n columns: [\n { data: 'sku', type: 'text', validator: skuValidator, allowInvalid: false },\n { data: 'supplier', type: 'text' },\n { data: 'quantity', type: 'numeric' },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/text-cell-type/javascript/example2.ts","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__react__example1.tsx.json
index 11ccdd99f..2850895a1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Text cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 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 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 skuValidator = (value: string, callback: (isValid: boolean) => void) => {\n callback(/^\\d{6}$/.test(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 skuValidator = (value: string, callback: (isValid: boolean) => void) => {\n callback(/^\\d{6}$/.test(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 "},"docsPath":"guides/cell-types/text-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Text cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/text-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/text-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__vue__example2.vue.json
index f7d77ee5f..53d2c1894 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__text-cell-type__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Cell Types ▸ Text cell type · Adding a validator · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/text-cell-type/vue/example2.vue","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Text cell type · Adding a validator · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/text-cell-type/vue/example2.vue","breadcrumb":["Cell Types","Text cell type"],"guide":"guides/cell-types/text-cell-type/text-cell-type.md","guideTitle":"Text cell type","exampleId":"example2","exampleTitle":"Adding a validator","docPermalink":"/text-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__angular__example1.ts.json
index 332c1288b..8cb314368 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Cell Types ▸ Time cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 ShiftData {\n shift: string;\n start: string;\n breakStart: string;\n end: string;\n}\n\n@Component({\n selector: 'example1-time-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \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-SP', label: 'Serbian Latin (Serbia)' },\n { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n ];\n\n readonly data: ShiftData[] = [\n { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Shift', 'Start', 'Break start', 'End'],\n locale: this.locale,\n columns: [\n {\n type: 'text',\n data: 'shift',\n },\n {\n type: 'intl-time',\n data: 'start',\n timeFormat: {\n timeStyle: 'short',\n },\n },\n {\n type: 'intl-time',\n data: 'breakStart',\n timeFormat: {\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit',\n },\n },\n {\n type: 'intl-time',\n data: 'end',\n timeFormat: {\n hour: 'numeric',\n hourCycle: 'h12',\n dayPeriod: 'short',\n },\n },\n ],\n columnSorting: true,\n filters: true,\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n get selectedLabel(): string {\n return this.localeOptions.find((o) => o.value === this.locale)?.label || '';\n }\n\n private elementRef = inject(ElementRef);\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n selectLocale(value: string): void {\n this.locale = value;\n this.isOpen = false;\n this.hotTable?.hotInstance?.updateSettings({ locale: this.locale });\n }\n\n @HostListener('document:click', ['$event'])\n onDocumentClick(event: MouseEvent): void {\n if (!this.elementRef.nativeElement.querySelector('.theme-dropdown')?.contains(event.target)) {\n this.isOpen = false;\n }\n }\n\n @HostListener('document:keydown', ['$event'])\n onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/time-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"Angular"}
+{"framework":"angular","displayName":"Cell Types ▸ Time cell type · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 ShiftData {\n shift: string;\n start: string;\n breakStart: string;\n end: string;\n}\n\n@Component({\n selector: 'example1-time-cell-type',\n standalone: true,\n imports: [HotTableModule],\n template: `\n \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-SP', label: 'Serbian Latin (Serbia)' },\n { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n ];\n\n readonly data: ShiftData[] = [\n { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Shift', 'Start', 'Break start', 'End'],\n locale: this.locale,\n columns: [\n {\n type: 'text',\n data: 'shift',\n },\n {\n type: 'intl-time',\n data: 'start',\n timeFormat: {\n timeStyle: 'short',\n },\n },\n {\n type: 'intl-time',\n data: 'breakStart',\n timeFormat: {\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit',\n },\n },\n {\n type: 'intl-time',\n data: 'end',\n timeFormat: {\n hour: 'numeric',\n hourCycle: 'h12',\n dayPeriod: 'short',\n },\n },\n ],\n columnSorting: true,\n filters: true,\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n get selectedLabel(): string {\n return this.localeOptions.find((o) => o.value === this.locale)?.label || '';\n }\n\n private elementRef = inject(ElementRef);\n\n toggleDropdown(): void {\n this.isOpen = !this.isOpen;\n }\n\n selectLocale(value: string): void {\n this.locale = value;\n this.isOpen = false;\n this.hotTable?.hotInstance?.updateSettings({ locale: this.locale });\n }\n\n @HostListener('document:click', ['$event'])\n onDocumentClick(event: MouseEvent): void {\n if (!this.elementRef.nativeElement.querySelector('.theme-dropdown')?.contains(event.target)) {\n this.isOpen = false;\n }\n }\n\n @HostListener('document:keydown', ['$event'])\n onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n this.isOpen = false;\n }\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/cell-types/time-cell-type/angular/example1.ts","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.js.json
index 2911cc4c4..c68e698f5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Cell Types ▸ Time cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst dropdown = document.querySelector('#localeDropdown');\nconst trigger = document.querySelector('#localeTrigger');\nconst menu = document.querySelector('#localeMenu');\nconst label = document.querySelector('#localeLabel');\nconst data = [\n { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n];\n\nconst hot = new Handsontable(container, {\n data,\n colHeaders: ['Shift', 'Start', 'Break start', 'End'],\n columns: [\n {\n type: 'text',\n data: 'shift',\n },\n {\n type: 'intl-time',\n data: 'start',\n timeFormat: {\n timeStyle: 'short',\n },\n },\n {\n type: 'intl-time',\n data: 'breakStart',\n timeFormat: {\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit',\n },\n },\n {\n type: 'intl-time',\n data: 'end',\n timeFormat: {\n hour: 'numeric',\n hourCycle: 'h12',\n dayPeriod: 'short',\n },\n },\n ],\n columnSorting: true,\n filters: true,\n dropdownMenu: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n autoWrapRow: true,\n autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n const isOpen = !menu.hidden;\n\n menu.hidden = isOpen;\n trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n const item = e.target.closest('li[data-value]');\n\n if (item) {\n label.textContent = item.textContent.trim();\n menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n item.setAttribute('aria-selected', 'true');\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n hot.updateSettings({ locale: item.dataset.value });\n }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n if (!dropdown.contains(e.target)) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && !menu.hidden) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n trigger.focus();\n }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/time-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Cell Types ▸ Time cell type · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst dropdown = document.querySelector('#localeDropdown');\nconst trigger = document.querySelector('#localeTrigger');\nconst menu = document.querySelector('#localeMenu');\nconst label = document.querySelector('#localeLabel');\nconst data = [\n { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n];\n\nconst hot = new Handsontable(container, {\n data,\n colHeaders: ['Shift', 'Start', 'Break start', 'End'],\n columns: [\n {\n type: 'text',\n data: 'shift',\n },\n {\n type: 'intl-time',\n data: 'start',\n timeFormat: {\n timeStyle: 'short',\n },\n },\n {\n type: 'intl-time',\n data: 'breakStart',\n timeFormat: {\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit',\n },\n },\n {\n type: 'intl-time',\n data: 'end',\n timeFormat: {\n hour: 'numeric',\n hourCycle: 'h12',\n dayPeriod: 'short',\n },\n },\n ],\n columnSorting: true,\n filters: true,\n dropdownMenu: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n autoWrapRow: true,\n autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n const isOpen = !menu.hidden;\n\n menu.hidden = isOpen;\n trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n const item = e.target.closest('li[data-value]');\n\n if (item) {\n label.textContent = item.textContent.trim();\n menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n item.setAttribute('aria-selected', 'true');\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n hot.updateSettings({ locale: item.dataset.value });\n }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n if (!dropdown.contains(e.target)) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && !menu.hidden) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n trigger.focus();\n }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/cell-types/time-cell-type/javascript/example1.js","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.ts.json
index b525462e3..edf67b817 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Cell Types ▸ Time cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst dropdown = document.querySelector('#localeDropdown')!;\nconst trigger = document.querySelector('#localeTrigger')!;\nconst menu = document.querySelector('#localeMenu')!;\nconst label = document.querySelector('#localeLabel')!;\nconst data = [\n { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n];\n\nconst hot = new Handsontable(container, {\n data,\n colHeaders: ['Shift', 'Start', 'Break start', 'End'],\n columns: [\n {\n type: 'text',\n data: 'shift',\n },\n {\n type: 'intl-time',\n data: 'start',\n timeFormat: {\n timeStyle: 'short',\n },\n },\n {\n type: 'intl-time',\n data: 'breakStart',\n timeFormat: {\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit',\n },\n },\n {\n type: 'intl-time',\n data: 'end',\n timeFormat: {\n hour: 'numeric',\n hourCycle: 'h12',\n dayPeriod: 'short',\n },\n },\n ],\n columnSorting: true,\n filters: true,\n dropdownMenu: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n autoWrapRow: true,\n autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n const isOpen = !menu.hidden;\n\n menu.hidden = isOpen;\n trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n const item = (e.target as HTMLElement).closest('li[data-value]') as HTMLLIElement | null;\n\n if (item) {\n label.textContent = item.textContent!.trim();\n menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n item.setAttribute('aria-selected', 'true');\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n hot.updateSettings({ locale: item.dataset.value });\n }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n if (!dropdown.contains(e.target as Node)) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && !menu.hidden) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n trigger.focus();\n }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/time-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Cell Types ▸ Time cell type · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst dropdown = document.querySelector('#localeDropdown')!;\nconst trigger = document.querySelector('#localeTrigger')!;\nconst menu = document.querySelector('#localeMenu')!;\nconst label = document.querySelector('#localeLabel')!;\nconst data = [\n { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n];\n\nconst hot = new Handsontable(container, {\n data,\n colHeaders: ['Shift', 'Start', 'Break start', 'End'],\n columns: [\n {\n type: 'text',\n data: 'shift',\n },\n {\n type: 'intl-time',\n data: 'start',\n timeFormat: {\n timeStyle: 'short',\n },\n },\n {\n type: 'intl-time',\n data: 'breakStart',\n timeFormat: {\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit',\n },\n },\n {\n type: 'intl-time',\n data: 'end',\n timeFormat: {\n hour: 'numeric',\n hourCycle: 'h12',\n dayPeriod: 'short',\n },\n },\n ],\n columnSorting: true,\n filters: true,\n dropdownMenu: true,\n height: 'auto',\n licenseKey: 'non-commercial-and-evaluation',\n autoWrapRow: true,\n autoWrapCol: true,\n});\n\n// Handle dropdown toggle\ntrigger.addEventListener('click', () => {\n const isOpen = !menu.hidden;\n\n menu.hidden = isOpen;\n trigger.setAttribute('aria-expanded', String(!isOpen));\n});\n\n// Handle locale selection\nmenu.addEventListener('click', (e) => {\n const item = (e.target as HTMLElement).closest('li[data-value]') as HTMLLIElement | null;\n\n if (item) {\n label.textContent = item.textContent!.trim();\n menu.querySelectorAll('li').forEach((li) => li.setAttribute('aria-selected', 'false'));\n item.setAttribute('aria-selected', 'true');\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n hot.updateSettings({ locale: item.dataset.value });\n }\n});\n\n// Close dropdown when clicking outside\ndocument.addEventListener('click', (e) => {\n if (!dropdown.contains(e.target as Node)) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n }\n});\n\n// Close dropdown on Escape key\ndocument.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && !menu.hidden) {\n menu.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n trigger.focus();\n }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/cell-types/time-cell-type/javascript/example1.ts","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__react__example1.tsx.json
index 224b7014f..a72424368 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__cell-types__time-cell-type__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Cell Types ▸ Time cell type · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-SP', label: 'Serbian Latin (Serbia)' },\n { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n];\n\nconst ExampleComponent = () => {\n const hotRef = useRef(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 { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n ];\n\n return (\n <>\n \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-SP', label: 'Serbian Latin (Serbia)' },\n { value: 'zh-CN', label: 'Chinese (Simplified, China)' },\n { value: 'zh-TW', label: 'Chinese (Traditional, Taiwan)' },\n];\n\nconst ExampleComponent = () => {\n const hotRef = useRef(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 { shift: 'Morning', start: '09:00', breakStart: '12:00', end: '17:00' },\n { shift: 'Afternoon', start: '13:30', breakStart: '16:00', end: '21:00' },\n { shift: 'Night', start: '22:00', breakStart: '01:00', end: '06:00' },\n { shift: 'Split', start: '08:00', breakStart: '12:30', end: '20:00' },\n { shift: 'Short day', start: '10:00', breakStart: '13:00', end: '15:00' },\n ];\n\n return (\n <>\n \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/time-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"Vue 3"}
+{"framework":"vue","displayName":"Cell Types ▸ Time cell type · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/time-cell-type/vue/example1.vue","breadcrumb":["Cell Types","Time cell type"],"guide":"guides/cell-types/time-cell-type/time-cell-type.md","guideTitle":"Time cell type","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/time-cell-type","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example1.ts.json
index 1d353ddf1..cee42db8e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Adding and removing columns · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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: 'example1-column-adding',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n
\n \n Insert column\n \n \n Remove last column\n \n
\n
\n
`,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly hotData = [\n ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n insertColumn(): void {\n const hot = this.hotTable?.hotInstance;\n\n // insert one column at the end of the grid\n hot?.alter('insert_col_end', hot.countCols() - 1, 1);\n }\n\n removeColumn(): void {\n const hot = this.hotTable?.hotInstance;\n\n // remove the last column, but keep at least one column in the grid\n if (hot && hot.countCols() > 1) {\n hot.alter('remove_col', hot.countCols() - 1, 1);\n }\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-adding/angular/example1.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Adding and removing columns · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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: 'example1-column-adding',\n standalone: true,\n imports: [HotTableModule],\n template: ` \n
\n \n Insert column\n \n \n Remove last column\n \n
\n
\n
`,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n readonly hotData = [\n ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ];\n\n readonly gridSettings: GridSettings = {\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n insertColumn(): void {\n const hot = this.hotTable?.hotInstance;\n\n // insert one column at the end of the grid\n hot?.alter('insert_col_end', hot.countCols() - 1, 1);\n }\n\n removeColumn(): void {\n const hot = this.hotTable?.hotInstance;\n\n // remove the last column, but keep at least one column in the grid\n if (hot && hot.countCols() > 1) {\n hot.alter('remove_col', hot.countCols() - 1, 1);\n }\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-adding/angular/example1.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example2.ts.json
index ff4a63e45..973228bb7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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-column-adding',\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\n@Component({\n selector: 'example2-column-adding',\n standalone: true,\n imports: [HotTableModule],\n template: `\n Handsontable Example \n \n\n\n \n
\n Insert column \n Remove last column \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('#example1');\nconst insertButton = document.querySelector('#insert-column');\nconst removeButton = document.querySelector('#remove-column');\nconst hot = new Handsontable(container, {\n data: [\n ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ],\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\ninsertButton.addEventListener('click', () => {\n // insert one column at the end of the grid\n hot.alter('insert_col_end', hot.countCols() - 1, 1);\n});\nremoveButton.addEventListener('click', () => {\n // remove the last column, but keep at least one column in the grid\n if (hot.countCols() > 1) {\n hot.alter('remove_col', hot.countCols() - 1, 1);\n }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-adding/javascript/example1.js","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Adding and removing columns · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 Insert column \n Remove last column \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('#example1');\nconst insertButton = document.querySelector('#insert-column');\nconst removeButton = document.querySelector('#remove-column');\nconst hot = new Handsontable(container, {\n data: [\n ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ],\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\ninsertButton.addEventListener('click', () => {\n // insert one column at the end of the grid\n hot.alter('insert_col_end', hot.countCols() - 1, 1);\n});\nremoveButton.addEventListener('click', () => {\n // remove the last column, but keep at least one column in the grid\n if (hot.countCols() > 1) {\n hot.alter('remove_col', hot.countCols() - 1, 1);\n }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-adding/javascript/example1.js","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example1.ts.json
index ad26b6bbd..92ad7acc8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Adding and removing columns · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 Insert column \n Remove last column \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 insertButton = document.querySelector('#insert-column')!;\nconst removeButton = document.querySelector('#remove-column')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ],\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\ninsertButton.addEventListener('click', () => {\n // insert one column at the end of the grid\n hot.alter('insert_col_end', hot.countCols() - 1, 1);\n});\n\nremoveButton.addEventListener('click', () => {\n // remove the last column, but keep at least one column in the grid\n if (hot.countCols() > 1) {\n hot.alter('remove_col', hot.countCols() - 1, 1);\n }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-adding/javascript/example1.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Adding and removing columns · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 Insert column \n Remove last column \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 insertButton = document.querySelector('#insert-column')!;\nconst removeButton = document.querySelector('#remove-column')!;\n\nconst hot = new Handsontable(container, {\n data: [\n ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ],\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\ninsertButton.addEventListener('click', () => {\n // insert one column at the end of the grid\n hot.alter('insert_col_end', hot.countCols() - 1, 1);\n});\n\nremoveButton.addEventListener('click', () => {\n // remove the last column, but keep at least one column in the grid\n if (hot.countCols() > 1) {\n hot.alter('remove_col', hot.countCols() - 1, 1);\n }\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-adding/javascript/example1.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.js.json
index 15f297ec8..48d5cdb6b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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');\nnew Handsontable(container, {\n data: [\n ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ],\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n // show only the column insert and remove items in the context menu\n contextMenu: ['col_left', 'col_right', 'remove_col'],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-adding/javascript/example2.js","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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');\nnew Handsontable(container, {\n data: [\n ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ],\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n // show only the column insert and remove items in the context menu\n contextMenu: ['col_left', 'col_right', 'remove_col'],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-adding/javascript/example2.js","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.ts.json
index ff860d04a..39f835c4a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ],\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n // show only the column insert and remove items in the context menu\n contextMenu: ['col_left', 'col_right', 'remove_col'],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-adding/javascript/example2.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 ['Ana García', 'Engineering', 'Senior Engineer', '2021-04-12'],\n ['James Okafor', 'Marketing', 'Product Manager', '2022-08-30'],\n ['Li Wei', 'Engineering', 'Staff Engineer', '2019-02-18'],\n ['Sofia Rossi', 'Sales', 'Account Executive', '2023-01-09'],\n ['Diego Fernández', 'Design', 'UX Designer', '2020-11-23'],\n ['Amara Singh', 'Engineering', 'Engineering Manager', '2018-06-05'],\n ],\n colHeaders: ['Name', 'Department', 'Title', 'Hire date'],\n rowHeaders: true,\n height: 'auto',\n // show only the column insert and remove items in the context menu\n contextMenu: ['col_left', 'col_right', 'remove_col'],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-adding/javascript/example2.ts","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__react__example1.tsx.json
index 58b9a5917..8f34a740e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Adding and removing columns · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const insertColumn = () => {\n const hot = hotRef.current?.hotInstance;\n\n // insert one column at the end of the grid\n hot?.alter('insert_col_end', hot.countCols() - 1, 1);\n };\n\n const removeColumn = () => {\n const hot = hotRef.current?.hotInstance;\n\n // remove the last column, but keep at least one column in the grid\n if (hot && hot.countCols() > 1) {\n hot.alter('remove_col', hot.countCols() - 1, 1);\n }\n };\n\n return (\n <>\n \n
\n \n Insert column\n \n \n Remove last column\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 } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotRef = useRef(null);\n\n const insertColumn = () => {\n const hot = hotRef.current?.hotInstance;\n\n // insert one column at the end of the grid\n hot?.alter('insert_col_end', hot.countCols() - 1, 1);\n };\n\n const removeColumn = () => {\n const hot = hotRef.current?.hotInstance;\n\n // remove the last column, but keep at least one column in the grid\n if (hot && hot.countCols() > 1) {\n hot.alter('remove_col', hot.countCols() - 1, 1);\n }\n };\n\n return (\n <>\n \n
\n \n Insert column\n \n \n Remove last column\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 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 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 Insert column\n \n \n Remove last column\n \n
\n
\n
\n
"},"docsPath":"guides/columns/column-adding/vue/example1.vue","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Adding and removing columns · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 Insert column\n \n \n Remove last column\n \n
\n
\n
\n
"},"docsPath":"guides/columns/column-adding/vue/example1.vue","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-adding","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__vue__example2.vue.json
index 80d296f45..1e45ef06f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-adding__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/columns/column-adding/vue/example2.vue","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Adding and removing columns · Add and remove columns from the context menu · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/columns/column-adding/vue/example2.vue","breadcrumb":["Columns","Adding and removing columns"],"guide":"guides/columns/column-adding/column-adding.md","guideTitle":"Adding and removing columns","exampleId":"example2","exampleTitle":"Add and remove columns from the context menu","docPermalink":"/column-adding","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example1.ts.json
index 247d1c24c..4f730c565 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example1.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example1.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example10.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example10.ts.json
index 7ed59d1d0..fb72160e0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example10.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example10.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Server-side filtering (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n // `beforeFilter()` is a Handsontable hook\n // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n beforeFilter(conditionsStack: { column: number; conditions: unknown[]; operation: string }[]) {\n // gather information about the filters\n console.log(`The amount of filters: ${conditionsStack.length}`);\n\n // when the filters are cleared, the conditions stack is empty\n const [lastChanged] = conditionsStack;\n\n if (lastChanged) {\n console.log(`The last changed column index: ${lastChanged.column}`);\n console.log(\n `The amount of filters added to this column: ${lastChanged.conditions.length}`\n );\n // the list of filter conditions\n console.log(lastChanged.conditions);\n }\n\n // return `false` to disable filtering on the client side\n return false;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example10.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example10","exampleTitle":"Server-side filtering (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Server-side filtering (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n // `beforeFilter()` is a Handsontable hook\n // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n beforeFilter(conditionsStack: { column: number; conditions: unknown[]; operation: string }[]) {\n // gather information about the filters\n console.log(`The amount of filters: ${conditionsStack.length}`);\n\n // when the filters are cleared, the conditions stack is empty\n const [lastChanged] = conditionsStack;\n\n if (lastChanged) {\n console.log(`The last changed column index: ${lastChanged.column}`);\n console.log(\n `The amount of filters added to this column: ${lastChanged.conditions.length}`\n );\n // the list of filter conditions\n console.log(lastChanged.conditions);\n }\n\n // return `false` to disable filtering on the client side\n return false;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example10.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example10","exampleTitle":"Server-side filtering (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example11.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example11.ts.json
index 16c6a3fa7..c4603692e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example11.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example11.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Filter data programmatically (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 Show items < $200 \n Show items > $200 \n Clear filters \n
\n
\n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n\n // get the `Filters` plugin, so you can use its API\n getFiltersPlugin(): Filters {\n return this.hotTable.hotInstance!.getPlugin('filters');\n }\n\n filterBelow200() {\n const filters = this.getFiltersPlugin();\n\n // clear any existing filters\n filters.clearConditions();\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n }\n\n filterAbove200() {\n const filters = this.getFiltersPlugin();\n\n filters.clearConditions();\n // display only items that are more than ('gt') $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n }\n\n clearAllFilters() {\n const filters = this.getFiltersPlugin();\n\n filters.clearConditions();\n filters.filter();\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example11.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example11","exampleTitle":"Filter data programmatically (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Filter data programmatically (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 Show items < $200 \n Show items > $200 \n Clear filters \n
\n
\n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n\n // get the `Filters` plugin, so you can use its API\n getFiltersPlugin(): Filters {\n return this.hotTable.hotInstance!.getPlugin('filters');\n }\n\n filterBelow200() {\n const filters = this.getFiltersPlugin();\n\n // clear any existing filters\n filters.clearConditions();\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n }\n\n filterAbove200() {\n const filters = this.getFiltersPlugin();\n\n filters.clearConditions();\n // display only items that are more than ('gt') $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n }\n\n clearAllFilters() {\n const filters = this.getFiltersPlugin();\n\n filters.clearConditions();\n filters.filter();\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example11.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example11","exampleTitle":"Filter data programmatically (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example12.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example12.ts.json
index b1f750674..bc222b372 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example12.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example12.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering with option\n filters: {\n searchMode: 'apply'\n },\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example12.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example12","exampleTitle":"Enable filtering within already filtered results (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering with option\n filters: {\n searchMode: 'apply'\n },\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example12.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example12","exampleTitle":"Enable filtering within already filtered results (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example13.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example13.ts.json
index d82966ae8..d9a453181 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example13.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example13.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Save and restore filter settings (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 Filter: price > $200 \n Save filter settings \n Clear filters \n Restore filter settings \n
\n
\n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n savedConditions: ColumnConditions[] = [];\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n // get the `Filters` plugin, so you can use its API\n getFiltersPlugin(): Filters {\n return this.hotTable.hotInstance!.getPlugin('filters');\n }\n\n applySampleFilter() {\n const filters = this.getFiltersPlugin();\n\n filters.clearConditions();\n // filter the 'Price' column (column at index 2) for items over $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n }\n\n saveFilters() {\n const filters = this.getFiltersPlugin();\n\n // `exportConditions()` returns the current conditions, keyed by physical column index\n this.savedConditions = filters.exportConditions();\n }\n\n clearFilters() {\n const filters = this.getFiltersPlugin();\n\n filters.clearConditions();\n filters.filter();\n }\n\n restoreFilters() {\n const filters = this.getFiltersPlugin();\n\n // `importConditions()` expects the same physical-column-indexed structure\n filters.importConditions(this.savedConditions);\n filters.filter();\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example13.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example13","exampleTitle":"Save and restore filter settings (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Save and restore filter settings (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 Filter: price > $200 \n Save filter settings \n Clear filters \n Restore filter settings \n
\n
\n \n `,\n})\nexport class AppComponent {\n @ViewChild(HotTableComponent, {static: false}) hotTable!: HotTableComponent;\n\n savedConditions: ColumnConditions[] = [];\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n\n // get the `Filters` plugin, so you can use its API\n getFiltersPlugin(): Filters {\n return this.hotTable.hotInstance!.getPlugin('filters');\n }\n\n applySampleFilter() {\n const filters = this.getFiltersPlugin();\n\n filters.clearConditions();\n // filter the 'Price' column (column at index 2) for items over $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n }\n\n saveFilters() {\n const filters = this.getFiltersPlugin();\n\n // `exportConditions()` returns the current conditions, keyed by physical column index\n this.savedConditions = filters.exportConditions();\n }\n\n clearFilters() {\n const filters = this.getFiltersPlugin();\n\n filters.clearConditions();\n filters.filter();\n }\n\n restoreFilters() {\n const filters = this.getFiltersPlugin();\n\n // `importConditions()` expects the same physical-column-indexed structure\n filters.importConditions(this.savedConditions);\n filters.filter();\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example13.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example13","exampleTitle":"Save and restore filter settings (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example14.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example14.ts.json
index 56ccd4a53..c2c6c2bcb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example14.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example14.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Get filtered data (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 {{ rowCountInfo }}
\n\n \n \n `,\n})\nexport class AppComponent {\n rowCountInfo = '';\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings;\n\n constructor() {\n // deferred so the update doesn't trigger NG0100 when `afterInit` fires\n // during the same change-detection cycle that first rendered the template\n const updateRowCountInfo = (hotInstance: Handsontable) => {\n setTimeout(() => {\n // `getData()` returns only the rows that pass the current filters\n // `getSourceData()` always returns every row, filtered or not\n this.rowCountInfo = `Showing ${hotInstance.getData().length} of ${hotInstance.getSourceData().length} rows.`;\n }, 0);\n };\n\n this.hotSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterInit()` and `afterFilter()` are Handsontable hooks\n afterInit(this: Handsontable) {\n updateRowCountInfo(this);\n },\n afterFilter(this: Handsontable) {\n updateRowCountInfo(this);\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example14.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example14","exampleTitle":"Get filtered data (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Get filtered data (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 {{ rowCountInfo }}
\n\n \n \n `,\n})\nexport class AppComponent {\n rowCountInfo = '';\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings;\n\n constructor() {\n // deferred so the update doesn't trigger NG0100 when `afterInit` fires\n // during the same change-detection cycle that first rendered the template\n const updateRowCountInfo = (hotInstance: Handsontable) => {\n setTimeout(() => {\n // `getData()` returns only the rows that pass the current filters\n // `getSourceData()` always returns every row, filtered or not\n this.rowCountInfo = `Showing ${hotInstance.getData().length} of ${hotInstance.getSourceData().length} rows.`;\n }, 0);\n };\n\n this.hotSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterInit()` and `afterFilter()` are Handsontable hooks\n afterInit(this: Handsontable) {\n updateRowCountInfo(this);\n },\n afterFilter(this: Handsontable) {\n updateRowCountInfo(this);\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example14.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example14","exampleTitle":"Get filtered data (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example2.ts.json
index 563838bf6..296b7df75 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Enable filtering (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu, but display only the filter menu items\n dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example2.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example2","exampleTitle":"Enable filtering (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Enable filtering (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu, but display only the filter menu items\n dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example2.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example2","exampleTitle":"Enable filtering (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example3.ts.json
index 20f401c24..26fea106f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Enable filtering for individual columns (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-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering for all columns\n filters: true,\n // enable the column menu for all columns\n // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons\n dropdownMenu: {\n items: {\n filter_by_value: {\n // hide the 'Filter by value' list from all columns but the first one\n hidden(this: Handsontable) {\n const col = this.getSelectedRangeLast()?.to.col;\n return col != null && col > 0;\n },\n },\n filter_action_bar: {\n // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n hidden(this: Handsontable) {\n const col = this.getSelectedRangeLast()?.to.col;\n return col != null && col > 0;\n },\n },\n clear_column: {\n // hide the 'Clear column' menu item from the first column\n hidden(this: Handsontable) {\n const col = this.getSelectedRangeLast()?.to.col;\n return col != null && col < 1;\n },\n },\n },\n },\n // `afterGetColHeader()` is a Handsontable hook\n // it's fired after Handsontable appends information about a column header to the table header\n afterGetColHeader(col: number, TH: HTMLElement) {\n // remove the column menu button from the 'Brand', 'Price', and 'Date' columns\n if (col > 1) {\n const button = TH.querySelector('.changeType');\n\n if (!button) {\n return;\n }\n\n button.parentElement?.removeChild(button);\n }\n },\n height: 'auto',\n // @ts-ignore\n example: 'exampleEnableFilterInColumns',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example3.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example3","exampleTitle":"Enable filtering for individual columns (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Enable filtering for individual columns (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering for all columns\n filters: true,\n // enable the column menu for all columns\n // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons\n dropdownMenu: {\n items: {\n filter_by_value: {\n // hide the 'Filter by value' list from all columns but the first one\n hidden(this: Handsontable) {\n const col = this.getSelectedRangeLast()?.to.col;\n return col != null && col > 0;\n },\n },\n filter_action_bar: {\n // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n hidden(this: Handsontable) {\n const col = this.getSelectedRangeLast()?.to.col;\n return col != null && col > 0;\n },\n },\n clear_column: {\n // hide the 'Clear column' menu item from the first column\n hidden(this: Handsontable) {\n const col = this.getSelectedRangeLast()?.to.col;\n return col != null && col < 1;\n },\n },\n },\n },\n // `afterGetColHeader()` is a Handsontable hook\n // it's fired after Handsontable appends information about a column header to the table header\n afterGetColHeader(col: number, TH: HTMLElement) {\n // remove the column menu button from the 'Brand', 'Price', and 'Date' columns\n if (col > 1) {\n const button = TH.querySelector('.changeType');\n\n if (!button) {\n return;\n }\n\n button.parentElement?.removeChild(button);\n }\n },\n height: 'auto',\n // @ts-ignore\n example: 'exampleEnableFilterInColumns',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example3.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example3","exampleTitle":"Enable filtering for individual columns (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example4.ts.json
index 306a6a999..91ea393a2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Filter different types of data (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n model: 'Racing Socks',\n size: 'S',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n color: 'Black',\n },\n {\n model: 'HL Mountain Shirt',\n size: 'XS',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n color: 'White',\n },\n {\n model: 'Cycling Cap',\n size: 'L',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n color: 'Green',\n },\n {\n model: 'Ski Jacket',\n size: 'M',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n color: 'Blue',\n },\n {\n model: 'HL Goggles',\n size: 'XL',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n color: 'Black',\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Model',\n // set the type of the 'Model' column\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n // set the type of the 'Price' column\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Sold on',\n // set the type of the 'Date' column\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n // set the type of the 'Time' column\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n // set the type of the 'In stock' column\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n {\n title: 'Size',\n // set the type of the 'Size' column\n type: 'dropdown',\n data: 'size',\n source: ['XS', 'S', 'M', 'L', 'XL'],\n className: 'htCenter',\n },\n {\n title: 'Color',\n // set the type of the 'Size' column\n type: 'autocomplete',\n data: 'color',\n source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 175,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example4.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example4","exampleTitle":"Filter different types of data (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Filter different types of data (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n model: 'Racing Socks',\n size: 'S',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n color: 'Black',\n },\n {\n model: 'HL Mountain Shirt',\n size: 'XS',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n color: 'White',\n },\n {\n model: 'Cycling Cap',\n size: 'L',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n color: 'Green',\n },\n {\n model: 'Ski Jacket',\n size: 'M',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n color: 'Blue',\n },\n {\n model: 'HL Goggles',\n size: 'XL',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n color: 'Black',\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Model',\n // set the type of the 'Model' column\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n // set the type of the 'Price' column\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Sold on',\n // set the type of the 'Date' column\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n // set the type of the 'Time' column\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n // set the type of the 'In stock' column\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n {\n title: 'Size',\n // set the type of the 'Size' column\n type: 'dropdown',\n data: 'size',\n source: ['XS', 'S', 'M', 'L', 'XL'],\n className: 'htCenter',\n },\n {\n title: 'Color',\n // set the type of the 'Size' column\n type: 'autocomplete',\n data: 'color',\n source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 175,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example4.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example4","exampleTitle":"Filter different types of data (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example5.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example5.ts.json
index 6c8e0429b..ee6d576f4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example5.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example5.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Filter data on initialization (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated\n afterInit(this: Handsontable) {\n // get the `Filters` plugin, so you can use its API\n const filters = this.getPlugin('filters');\n\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example5.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example5","exampleTitle":"Filter data on initialization (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Filter data on initialization (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated\n afterInit(this: Handsontable) {\n // get the `Filters` plugin, so you can use its API\n const filters = this.getPlugin('filters');\n\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example5.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example5","exampleTitle":"Filter data on initialization (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example6.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example6.ts.json
index f373c89fa..92c2c3b90 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example6.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example6.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · External quick filter (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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
Select a column: \n
\n {{ selectedLabel }} \n \n \n \n @if (isOpen) {\n \n }\n \n
\n
\n
Handsontable Angular Example \n \n
\n
\n
Select a column: \n
\n {{ selectedLabel }} \n \n \n \n @if (isOpen) {\n \n }\n \n
\n
\n
Handsontable Angular Example \n \n \n `,\n styles: `\n :host ::ng-deep {\n .handsontable.customFilterButtonExample1 .changeType {\n --ht-icon-button-background-color: #e2e2e263;\n --ht-icon-button-border-radius: 100%;\n }\n\n .handsontable.customFilterButtonExample1 .changeType::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E\");\n }\n }\n `,\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample1',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example7.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example7","exampleTitle":"Customize the filter button (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Customize the filter button (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 styles: `\n :host ::ng-deep {\n .handsontable.customFilterButtonExample1 .changeType {\n --ht-icon-button-background-color: #e2e2e263;\n --ht-icon-button-border-radius: 100%;\n }\n\n .handsontable.customFilterButtonExample1 .changeType::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E\");\n }\n }\n `,\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample1',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example7.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example7","exampleTitle":"Customize the filter button (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example8.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example8.ts.json
index 4f90fd092..f378034b3 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example8.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example8.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Customize the filter button (4) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 styles: `\n :host ::ng-deep {\n /* hide the column menu button by default */\n .customFilterButtonExample2 .changeType {\n visibility: hidden;\n }\n\n /* show the column menu button on hover */\n .customFilterButtonExample2 th .relative:hover .changeType {\n visibility: visible;\n }\n }\n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample2',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example8.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example8","exampleTitle":"Customize the filter button (4)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Customize the filter button (4) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 styles: `\n :host ::ng-deep {\n /* hide the column menu button by default */\n .customFilterButtonExample2 .changeType {\n visibility: hidden;\n }\n\n /* show the column menu button on hover */\n .customFilterButtonExample2 th .relative:hover .changeType {\n visibility: visible;\n }\n }\n `,\n standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample2',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example8.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example8","exampleTitle":"Customize the filter button (4)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example9.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example9.ts.json
index d895dcd91..9f44be8ab 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example9.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__angular__example9.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column filter · Exclude rows from filtering (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 11,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 0,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 1,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 3,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 5,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 22,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 13,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 14,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 16,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 18,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 3,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Vinte',\n model: 'ML Road Frame-W',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 2,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n className: 'htRight',\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'numeric',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n height: 200,\n colWidths: [120, 150, 120, 140, 120, 120],\n fixedRowsTop: 1,\n fixedRowsBottom: 1,\n colHeaders: true,\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n afterFilter(this: Handsontable) {\n const filtersPlugin = this.getPlugin('filters');\n const filtersRowsMap = (filtersPlugin as any).filtersRowsMap;\n\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(filtersRowsMap.getLength() - 1, false);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example9.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example9","exampleTitle":"Exclude rows from filtering (2)","docPermalink":"/column-filter","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column filter · Exclude rows from filtering (2) · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 11,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 0,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 1,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 3,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 5,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 22,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 13,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 14,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 16,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 18,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 3,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Vinte',\n model: 'ML Road Frame-W',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 2,\n },\n ];\n\n readonly hotSettings: GridSettings = {\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n className: 'htRight',\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'numeric',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n height: 200,\n colWidths: [120, 150, 120, 140, 120, 120],\n fixedRowsTop: 1,\n fixedRowsBottom: 1,\n colHeaders: true,\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n afterFilter(this: Handsontable) {\n const filtersPlugin = this.getPlugin('filters');\n const filtersRowsMap = (filtersPlugin as any).filtersRowsMap;\n\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(filtersRowsMap.getLength() - 1, false);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-filter/angular/example9.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"example9","exampleTitle":"Exclude rows from filtering (2)","docPermalink":"/column-filter","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.js.json
index 5b11d3c2e..509b67a34 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Customize the filter button · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","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-53ad929-20260908\",\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('#exampleCustomFilterButton');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample1',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".handsontable.customFilterButtonExample1 .changeType {\n --ht-icon-button-background-color: #e2e2e263;\n --ht-icon-button-border-radius: 100%;\n}\n\n.handsontable.customFilterButtonExample1 .changeType::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E\");\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleCustomFilterButton.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton","exampleTitle":"Customize the filter button","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Customize the filter button · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","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-5680ec8-20260909\",\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('#exampleCustomFilterButton');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample1',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".handsontable.customFilterButtonExample1 .changeType {\n --ht-icon-button-background-color: #e2e2e263;\n --ht-icon-button-border-radius: 100%;\n}\n\n.handsontable.customFilterButtonExample1 .changeType::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E\");\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleCustomFilterButton.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton","exampleTitle":"Customize the filter button","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.ts.json
index b5a6cc481..4b82eba47 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Customize the filter button · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","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-53ad929-20260908\",\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('#exampleCustomFilterButton')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample1',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".handsontable.customFilterButtonExample1 .changeType {\n --ht-icon-button-background-color: #e2e2e263;\n --ht-icon-button-border-radius: 100%;\n}\n\n.handsontable.customFilterButtonExample1 .changeType::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E\");\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleCustomFilterButton.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton","exampleTitle":"Customize the filter button","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Customize the filter button · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","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-5680ec8-20260909\",\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('#exampleCustomFilterButton')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample1',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".handsontable.customFilterButtonExample1 .changeType {\n --ht-icon-button-background-color: #e2e2e263;\n --ht-icon-button-border-radius: 100%;\n}\n\n.handsontable.customFilterButtonExample1 .changeType::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.83337 7.99984C6.83337 8.30926 6.95629 8.606 7.17508 8.8248C7.39388 9.04359 7.69062 9.1665 8.00004 9.1665C8.30946 9.1665 8.60621 9.04359 8.825 8.8248C9.04379 8.606 9.16671 8.30926 9.16671 7.99984C9.16671 7.69042 9.04379 7.39367 8.825 7.17488C8.60621 6.95609 8.30946 6.83317 8.00004 6.83317C7.69062 6.83317 7.39388 6.95609 7.17508 7.17488C6.95629 7.39367 6.83337 7.69042 6.83337 7.99984Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 12.4165C6.83337 12.7259 6.95629 13.0227 7.17508 13.2415C7.39388 13.4603 7.69062 13.5832 8.00004 13.5832C8.30946 13.5832 8.60621 13.4603 8.825 13.2415C9.04379 13.0227 9.16671 12.7259 9.16671 12.4165C9.16671 12.1071 9.04379 11.8103 8.825 11.5915C8.60621 11.3728 8.30946 11.2498 8.00004 11.2498C7.69062 11.2498 7.39388 11.3728 7.17508 11.5915C6.95629 11.8103 6.83337 12.1071 6.83337 12.4165Z%27 fill=%27%23222222%27/%3E%3Cpath d=%27M6.83337 3.58317C6.83337 3.89259 6.95629 4.18934 7.17508 4.40813C7.39388 4.62692 7.69062 4.74984 8.00004 4.74984C8.30946 4.74984 8.60621 4.62692 8.825 4.40813C9.04379 4.18934 9.16671 3.89259 9.16671 3.58317C9.16671 3.27375 9.04379 2.97701 8.825 2.75821C8.60621 2.53942 8.30946 2.4165 8.00004 2.4165C7.69062 2.4165 7.39388 2.53942 7.17508 2.75821C6.95629 2.97701 6.83337 3.27375 6.83337 3.58317Z%27 fill=%27currentColor%27/%3E%3C/svg%3E\");\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleCustomFilterButton.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton","exampleTitle":"Customize the filter button","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.js.json
index 2693ef7fa..665a75f89 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Customize the filter button (3) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","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-53ad929-20260908\",\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('#exampleCustomFilterButton2');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample2',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"/* hide the column menu button by default */\n.customFilterButtonExample2 .changeType {\n visibility: hidden;\n}\n\n/* show the column menu button on hover */\n.customFilterButtonExample2 th .relative:hover .changeType {\n visibility: visible;\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleCustomFilterButton2.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton2","exampleTitle":"Customize the filter button (3)","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Customize the filter button (3) · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","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-5680ec8-20260909\",\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('#exampleCustomFilterButton2');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample2',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":"/* hide the column menu button by default */\n.customFilterButtonExample2 .changeType {\n visibility: hidden;\n}\n\n/* show the column menu button on hover */\n.customFilterButtonExample2 th .relative:hover .changeType {\n visibility: visible;\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleCustomFilterButton2.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton2","exampleTitle":"Customize the filter button (3)","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.ts.json
index e394fd5cb..df5dc467b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleCustomFilterButton2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Customize the filter button (3) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","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-53ad929-20260908\",\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('#exampleCustomFilterButton2')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample2',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"/* hide the column menu button by default */\n.customFilterButtonExample2 .changeType {\n visibility: hidden;\n}\n\n/* show the column menu button on hover */\n.customFilterButtonExample2 th .relative:hover .changeType {\n visibility: visible;\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleCustomFilterButton2.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton2","exampleTitle":"Customize the filter button (3)","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Customize the filter button (3) · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","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-5680ec8-20260909\",\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('#exampleCustomFilterButton2')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // to differentiate this example's CSS from other examples on this page\n className: 'customFilterButtonExample2',\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":"/* hide the column menu button by default */\n.customFilterButtonExample2 .changeType {\n visibility: hidden;\n}\n\n/* show the column menu button on hover */\n.customFilterButtonExample2 th .relative:hover .changeType {\n visibility: visible;\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleCustomFilterButton2.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton2","exampleTitle":"Customize the filter button (3)","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.js.json
index 3b4df9621..f9d4d9057 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Enable filtering for individual columns · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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('#exampleEnableFilterInColumns');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering for all columns\n filters: true,\n // enable the column menu for all columns\n // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons\n dropdownMenu: {\n items: {\n filter_by_value: {\n // hide the 'Filter by value' list from all columns but the first one\n hidden() {\n return this.getSelectedRangeLast().to.col > 0;\n },\n },\n filter_action_bar: {\n // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n hidden() {\n return this.getSelectedRangeLast().to.col > 0;\n },\n },\n clear_column: {\n // hide the 'Clear column' menu item from the first column\n hidden() {\n return this.getSelectedRangeLast().to.col < 1;\n },\n },\n },\n },\n // `afterGetColHeader()` is a Handsontable hook\n // it's fired after Handsontable appends information about a column header to the table header\n afterGetColHeader(col, TH) {\n // remove the column menu button from the 'Brand', 'Price', and 'Date' columns\n if (col > 1) {\n const button = TH.querySelector('.changeType');\n\n if (!button) {\n return;\n }\n\n button.parentElement.removeChild(button);\n }\n },\n height: 'auto',\n example: 'exampleEnableFilterInColumns',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleEnableFilterInColumns.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleEnableFilterInColumns","exampleTitle":"Enable filtering for individual columns","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Enable filtering for individual columns · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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('#exampleEnableFilterInColumns');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering for all columns\n filters: true,\n // enable the column menu for all columns\n // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons\n dropdownMenu: {\n items: {\n filter_by_value: {\n // hide the 'Filter by value' list from all columns but the first one\n hidden() {\n return this.getSelectedRangeLast().to.col > 0;\n },\n },\n filter_action_bar: {\n // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n hidden() {\n return this.getSelectedRangeLast().to.col > 0;\n },\n },\n clear_column: {\n // hide the 'Clear column' menu item from the first column\n hidden() {\n return this.getSelectedRangeLast().to.col < 1;\n },\n },\n },\n },\n // `afterGetColHeader()` is a Handsontable hook\n // it's fired after Handsontable appends information about a column header to the table header\n afterGetColHeader(col, TH) {\n // remove the column menu button from the 'Brand', 'Price', and 'Date' columns\n if (col > 1) {\n const button = TH.querySelector('.changeType');\n\n if (!button) {\n return;\n }\n\n button.parentElement.removeChild(button);\n }\n },\n height: 'auto',\n example: 'exampleEnableFilterInColumns',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleEnableFilterInColumns.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleEnableFilterInColumns","exampleTitle":"Enable filtering for individual columns","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.ts.json
index c4c340af9..1a0de434c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleEnableFilterInColumns.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Enable filtering for individual columns · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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('#exampleEnableFilterInColumns')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering for all columns\n filters: true,\n // enable the column menu for all columns\n // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons\n dropdownMenu: {\n items: {\n filter_by_value: {\n // hide the 'Filter by value' list from all columns but the first one\n hidden() {\n return this.getSelectedRangeLast()!.to.col > 0;\n },\n },\n filter_action_bar: {\n // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n hidden() {\n return this.getSelectedRangeLast()!.to.col > 0;\n },\n },\n clear_column: {\n // hide the 'Clear column' menu item from the first column\n hidden() {\n return this.getSelectedRangeLast()!.to.col < 1;\n },\n },\n },\n },\n // `afterGetColHeader()` is a Handsontable hook\n // it's fired after Handsontable appends information about a column header to the table header\n afterGetColHeader(col, TH) {\n // remove the column menu button from the 'Brand', 'Price', and 'Date' columns\n if (col > 1) {\n const button = TH.querySelector('.changeType')!;\n\n if (!button) {\n return;\n }\n\n button.parentElement!.removeChild(button);\n }\n },\n height: 'auto',\n example: 'exampleEnableFilterInColumns',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n} as Handsontable.GridSettings);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleEnableFilterInColumns.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleEnableFilterInColumns","exampleTitle":"Enable filtering for individual columns","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Enable filtering for individual columns · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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('#exampleEnableFilterInColumns')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering for all columns\n filters: true,\n // enable the column menu for all columns\n // but display only the 'Filter by value' list and the 'OK' and 'Cancel' buttons\n dropdownMenu: {\n items: {\n filter_by_value: {\n // hide the 'Filter by value' list from all columns but the first one\n hidden() {\n return this.getSelectedRangeLast()!.to.col > 0;\n },\n },\n filter_action_bar: {\n // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n hidden() {\n return this.getSelectedRangeLast()!.to.col > 0;\n },\n },\n clear_column: {\n // hide the 'Clear column' menu item from the first column\n hidden() {\n return this.getSelectedRangeLast()!.to.col < 1;\n },\n },\n },\n },\n // `afterGetColHeader()` is a Handsontable hook\n // it's fired after Handsontable appends information about a column header to the table header\n afterGetColHeader(col, TH) {\n // remove the column menu button from the 'Brand', 'Price', and 'Date' columns\n if (col > 1) {\n const button = TH.querySelector('.changeType')!;\n\n if (!button) {\n return;\n }\n\n button.parentElement!.removeChild(button);\n }\n },\n height: 'auto',\n example: 'exampleEnableFilterInColumns',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n} as Handsontable.GridSettings);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleEnableFilterInColumns.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleEnableFilterInColumns","exampleTitle":"Enable filtering for individual columns","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.js.json
index 7913ee41c..a53ae8fdf 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Exclude rows from filtering · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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('#exampleExcludeRowsFromFiltering');\nnew Handsontable(container, {\n data: [\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 11,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 0,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 1,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 3,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 5,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 22,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 13,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 14,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 16,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 18,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 3,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Vinte',\n model: 'ML Road Frame-W',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 2,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n className: 'htRight',\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'numeric',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n height: 200,\n colWidths: [120, 150, 120, 140, 120, 120],\n fixedRowsTop: 1,\n fixedRowsBottom: 1,\n colHeaders: true,\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n afterFilter() {\n const filtersPlugin = this.getPlugin('filters');\n const filtersRowsMap = filtersPlugin.filtersRowsMap;\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(filtersRowsMap.getLength() - 1, false);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleExcludeRowsFromFiltering.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Exclude rows from filtering · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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('#exampleExcludeRowsFromFiltering');\nnew Handsontable(container, {\n data: [\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 11,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 0,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 1,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 3,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 5,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 22,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 13,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 14,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 16,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 18,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 3,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Vinte',\n model: 'ML Road Frame-W',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 2,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n className: 'htRight',\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'numeric',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n height: 200,\n colWidths: [120, 150, 120, 140, 120, 120],\n fixedRowsTop: 1,\n fixedRowsBottom: 1,\n colHeaders: true,\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n afterFilter() {\n const filtersPlugin = this.getPlugin('filters');\n const filtersRowsMap = filtersPlugin.filtersRowsMap;\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(filtersRowsMap.getLength() - 1, false);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleExcludeRowsFromFiltering.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.ts.json
index 38aa7242c..2cb8e1432 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleExcludeRowsFromFiltering.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Exclude rows from filtering · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleExcludeRowsFromFiltering')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 11,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 0,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 1,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 3,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 5,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 22,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 13,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 14,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 16,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 18,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 3,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Vinte',\n model: 'ML Road Frame-W',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 2,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n className: 'htRight',\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'numeric',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n height: 200,\n colWidths: [120, 150, 120, 140, 120, 120],\n fixedRowsTop: 1,\n fixedRowsBottom: 1,\n colHeaders: true,\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n afterFilter() {\n const filtersPlugin: Filters = (this as Handsontable).getPlugin('filters');\n const filtersRowsMap = filtersPlugin.filtersRowsMap;\n\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(filtersRowsMap.getLength() - 1, false);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleExcludeRowsFromFiltering.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Exclude rows from filtering · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleExcludeRowsFromFiltering')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 11,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 0,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 1,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 3,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 5,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 22,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 13,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: 14,\n },\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 16,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: 18,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: 3,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: 0,\n },\n {\n brand: 'Vinte',\n model: 'ML Road Frame-W',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: 2,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n className: 'htRight',\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'numeric',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n height: 200,\n colWidths: [120, 150, 120, 140, 120, 120],\n fixedRowsTop: 1,\n fixedRowsBottom: 1,\n colHeaders: true,\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n afterFilter() {\n const filtersPlugin: Filters = (this as Handsontable).getPlugin('filters');\n const filtersRowsMap = filtersPlugin.filtersRowsMap;\n\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(filtersRowsMap.getLength() - 1, false);\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleExcludeRowsFromFiltering.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.js.json
index f46cebbab..cd1ca3ba2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Filtering demo · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterBasicDemo');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterBasicDemo.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterBasicDemo","exampleTitle":"Filtering demo","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Filtering demo · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterBasicDemo');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterBasicDemo.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterBasicDemo","exampleTitle":"Filtering demo","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.ts.json
index 984929d57..0aa183ed4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterBasicDemo.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Filtering demo · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterBasicDemo')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterBasicDemo.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterBasicDemo","exampleTitle":"Filtering demo","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Filtering demo · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterBasicDemo')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterBasicDemo.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterBasicDemo","exampleTitle":"Filtering demo","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.js.json
index 568e747e9..ea152ea8f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Filter different types of data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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('#exampleFilterDifferentTypes');\n\nnew Handsontable(container, {\n data: [\n {\n model: 'Racing Socks',\n size: 'S',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n color: 'Black',\n },\n {\n model: 'HL Mountain Shirt',\n size: 'XS',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n color: 'White',\n },\n {\n model: 'Cycling Cap',\n size: 'L',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n color: 'Green',\n },\n {\n model: 'Ski Jacket',\n size: 'M',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n color: 'Blue',\n },\n {\n model: 'HL Goggles',\n size: 'XL',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n color: 'Black',\n },\n ],\n columns: [\n {\n title: 'Model',\n // set the type of the 'Model' column\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n // set the type of the 'Price' column\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Sold on',\n // set the type of the 'Date' column\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n // set the type of the 'Time' column\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n // set the type of the 'In stock' column\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n {\n title: 'Size',\n // set the type of the 'Size' column\n type: 'dropdown',\n data: 'size',\n source: ['XS', 'S', 'M', 'L', 'XL'],\n className: 'htCenter',\n },\n {\n title: 'Color',\n // set the type of the 'Size' column\n type: 'autocomplete',\n data: 'color',\n source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 175,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterDifferentTypes.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterDifferentTypes","exampleTitle":"Filter different types of data","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Filter different types of data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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('#exampleFilterDifferentTypes');\n\nnew Handsontable(container, {\n data: [\n {\n model: 'Racing Socks',\n size: 'S',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n color: 'Black',\n },\n {\n model: 'HL Mountain Shirt',\n size: 'XS',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n color: 'White',\n },\n {\n model: 'Cycling Cap',\n size: 'L',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n color: 'Green',\n },\n {\n model: 'Ski Jacket',\n size: 'M',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n color: 'Blue',\n },\n {\n model: 'HL Goggles',\n size: 'XL',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n color: 'Black',\n },\n ],\n columns: [\n {\n title: 'Model',\n // set the type of the 'Model' column\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n // set the type of the 'Price' column\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Sold on',\n // set the type of the 'Date' column\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n // set the type of the 'Time' column\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n // set the type of the 'In stock' column\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n {\n title: 'Size',\n // set the type of the 'Size' column\n type: 'dropdown',\n data: 'size',\n source: ['XS', 'S', 'M', 'L', 'XL'],\n className: 'htCenter',\n },\n {\n title: 'Color',\n // set the type of the 'Size' column\n type: 'autocomplete',\n data: 'color',\n source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 175,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterDifferentTypes.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterDifferentTypes","exampleTitle":"Filter different types of data","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.ts.json
index 5ee49ec1f..3ba696671 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterDifferentTypes.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Filter different types of data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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('#exampleFilterDifferentTypes')!;\n\nnew Handsontable(container, {\n data: [\n {\n model: 'Racing Socks',\n size: 'S',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n color: 'Black',\n },\n {\n model: 'HL Mountain Shirt',\n size: 'XS',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n color: 'White',\n },\n {\n model: 'Cycling Cap',\n size: 'L',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n color: 'Green',\n },\n {\n model: 'Ski Jacket',\n size: 'M',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n color: 'Blue',\n },\n {\n model: 'HL Goggles',\n size: 'XL',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n color: 'Black',\n },\n ],\n columns: [\n {\n title: 'Model',\n // set the type of the 'Model' column\n type: 'text', // 'text' is the default type, so you can omit this line\n data: 'model',\n },\n {\n title: 'Price',\n // set the type of the 'Price' column\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Sold on',\n // set the type of the 'Date' column\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n // set the type of the 'Time' column\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n // set the type of the 'In stock' column\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n {\n title: 'Size',\n // set the type of the 'Size' column\n type: 'dropdown',\n data: 'size',\n source: ['XS', 'S', 'M', 'L', 'XL'],\n className: 'htCenter',\n },\n {\n title: 'Color',\n // set the type of the 'Size' column\n type: 'autocomplete',\n data: 'color',\n source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 175,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterDifferentTypes.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterDifferentTypes","exampleTitle":"Filter different types of data","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Filter different types of data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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('#exampleFilterDifferentTypes')!;\n\nnew Handsontable(container, {\n data: [\n {\n model: 'Racing Socks',\n size: 'S',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n color: 'Black',\n },\n {\n model: 'HL Mountain Shirt',\n size: 'XS',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n color: 'White',\n },\n {\n model: 'Cycling Cap',\n size: 'L',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n color: 'Green',\n },\n {\n model: 'Ski Jacket',\n size: 'M',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n color: 'Blue',\n },\n {\n model: 'HL Goggles',\n size: 'XL',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n color: 'Black',\n },\n ],\n columns: [\n {\n title: 'Model',\n // set the type of the 'Model' column\n type: 'text', // 'text' is the default type, so you can omit this line\n data: 'model',\n },\n {\n title: 'Price',\n // set the type of the 'Price' column\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Sold on',\n // set the type of the 'Date' column\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n // set the type of the 'Time' column\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n // set the type of the 'In stock' column\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n {\n title: 'Size',\n // set the type of the 'Size' column\n type: 'dropdown',\n data: 'size',\n source: ['XS', 'S', 'M', 'L', 'XL'],\n className: 'htCenter',\n },\n {\n title: 'Color',\n // set the type of the 'Size' column\n type: 'autocomplete',\n data: 'color',\n source: ['White', 'Black', 'Yellow', 'Blue', 'Green'],\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 175,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterDifferentTypes.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterDifferentTypes","exampleTitle":"Filter different types of data","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.js.json
index 6a2f19ffe..a73287f04 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Filter data on initialization · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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('#exampleFilterOnInitialization');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated\n afterInit() {\n const handsontableInstance = this;\n // get the `Filters` plugin, so you can use its API\n const filters = handsontableInstance.getPlugin('filters');\n\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterOnInitialization.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterOnInitialization","exampleTitle":"Filter data on initialization","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Filter data on initialization · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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('#exampleFilterOnInitialization');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated\n afterInit() {\n const handsontableInstance = this;\n // get the `Filters` plugin, so you can use its API\n const filters = handsontableInstance.getPlugin('filters');\n\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterOnInitialization.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterOnInitialization","exampleTitle":"Filter data on initialization","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.ts.json
index 1277f42b8..e6d972bf2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterOnInitialization.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Filter data on initialization · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterOnInitialization')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated\n afterInit() {\n const handsontableInstance = this;\n // get the `Filters` plugin, so you can use its API\n const filters: Filters = handsontableInstance.getPlugin('filters');\n\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterOnInitialization.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterOnInitialization","exampleTitle":"Filter data on initialization","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Filter data on initialization · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterOnInitialization')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterInit()` is a Handsontable hook: it's fired after the Handsontable instance is initiated\n afterInit() {\n const handsontableInstance = this;\n // get the `Filters` plugin, so you can use its API\n const filters: Filters = handsontableInstance.getPlugin('filters');\n\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterOnInitialization.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterOnInitialization","exampleTitle":"Filter data on initialization","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.js.json
index 1f416c16e..f508409b8 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Filter data programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 Show items < $200 \n Show items > $200 \n Clear filters \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('#exampleFilterThroughAPI1');\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// get the `Filters` plugin, so you can use its API\nconst filters = hot.getPlugin('filters');\n\ndocument.querySelector('.filterBelow200').addEventListener('click', () => {\n // clear any existing filters\n filters.clearConditions();\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n});\ndocument.querySelector('.filterAbove200').addEventListener('click', () => {\n filters.clearConditions();\n // display only items that are more than ('gt') $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n});\ndocument.querySelector('.clearAllFilters').addEventListener('click', () => {\n filters.clearConditions();\n filters.filter();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterThroughAPI1.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterThroughAPI1","exampleTitle":"Filter data programmatically","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Filter data programmatically · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 Show items < $200 \n Show items > $200 \n Clear filters \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('#exampleFilterThroughAPI1');\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// get the `Filters` plugin, so you can use its API\nconst filters = hot.getPlugin('filters');\n\ndocument.querySelector('.filterBelow200').addEventListener('click', () => {\n // clear any existing filters\n filters.clearConditions();\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n});\ndocument.querySelector('.filterAbove200').addEventListener('click', () => {\n filters.clearConditions();\n // display only items that are more than ('gt') $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n});\ndocument.querySelector('.clearAllFilters').addEventListener('click', () => {\n filters.clearConditions();\n filters.filter();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterThroughAPI1.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterThroughAPI1","exampleTitle":"Filter data programmatically","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.ts.json
index 4308e0b7f..3043bddb6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleFilterThroughAPI1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Filter data programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 Show items < $200 \n Show items > $200 \n Clear filters \n
\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterThroughAPI1')!;\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// get the `Filters` plugin, so you can use its API\nconst filters: Filters = hot.getPlugin('filters');\n\ndocument.querySelector('.filterBelow200')!.addEventListener('click', () => {\n // clear any existing filters\n filters.clearConditions();\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n});\n\ndocument.querySelector('.filterAbove200')!.addEventListener('click', () => {\n filters.clearConditions();\n // display only items that are more than ('gt') $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n});\n\ndocument.querySelector('.clearAllFilters')!.addEventListener('click', () => {\n filters.clearConditions();\n filters.filter();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterThroughAPI1.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterThroughAPI1","exampleTitle":"Filter data programmatically","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Filter data programmatically · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 Show items < $200 \n Show items > $200 \n Clear filters \n
\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleFilterThroughAPI1')!;\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// get the `Filters` plugin, so you can use its API\nconst filters: Filters = hot.getPlugin('filters');\n\ndocument.querySelector('.filterBelow200')!.addEventListener('click', () => {\n // clear any existing filters\n filters.clearConditions();\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters.addCondition(2, 'lt', [200]);\n filters.filter();\n});\n\ndocument.querySelector('.filterAbove200')!.addEventListener('click', () => {\n filters.clearConditions();\n // display only items that are more than ('gt') $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n});\n\ndocument.querySelector('.clearAllFilters')!.addEventListener('click', () => {\n filters.clearConditions();\n filters.filter();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleFilterThroughAPI1.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterThroughAPI1","exampleTitle":"Filter data programmatically","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.js.json
index 7713627a0..c62cdcb19 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Get filtered data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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('#exampleGetFilteredData');\nconst rowCountInfo = document.querySelector('#rowCountInfo');\nfunction updateRowCountInfo(instance) {\n // `getData()` returns only the rows that pass the current filters\n const visibleRowCount = instance.getData().length;\n // `getSourceData()` always returns every row, filtered or not\n const totalRowCount = instance.getSourceData().length;\n rowCountInfo.textContent = `Showing ${visibleRowCount} of ${totalRowCount} rows.`;\n}\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterFilter()` fires after Handsontable applies the filters\n afterFilter() {\n updateRowCountInfo(this);\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nupdateRowCountInfo(hot);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleGetFilteredData.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Get filtered data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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('#exampleGetFilteredData');\nconst rowCountInfo = document.querySelector('#rowCountInfo');\nfunction updateRowCountInfo(instance) {\n // `getData()` returns only the rows that pass the current filters\n const visibleRowCount = instance.getData().length;\n // `getSourceData()` always returns every row, filtered or not\n const totalRowCount = instance.getSourceData().length;\n rowCountInfo.textContent = `Showing ${visibleRowCount} of ${totalRowCount} rows.`;\n}\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterFilter()` fires after Handsontable applies the filters\n afterFilter() {\n updateRowCountInfo(this);\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\nupdateRowCountInfo(hot);","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleGetFilteredData.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.ts.json
index 7f4f5110e..7e3f1895a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleGetFilteredData.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Get filtered data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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('#exampleGetFilteredData')!;\nconst rowCountInfo = document.querySelector('#rowCountInfo')!;\n\nfunction updateRowCountInfo(instance: Handsontable) {\n // `getData()` returns only the rows that pass the current filters\n const visibleRowCount = instance.getData().length;\n // `getSourceData()` always returns every row, filtered or not\n const totalRowCount = instance.getSourceData().length;\n\n rowCountInfo.textContent = `Showing ${visibleRowCount} of ${totalRowCount} rows.`;\n}\n\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterFilter()` fires after Handsontable applies the filters\n afterFilter() {\n updateRowCountInfo(this);\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nupdateRowCountInfo(hot);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleGetFilteredData.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Get filtered data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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('#exampleGetFilteredData')!;\nconst rowCountInfo = document.querySelector('#rowCountInfo')!;\n\nfunction updateRowCountInfo(instance: Handsontable) {\n // `getData()` returns only the rows that pass the current filters\n const visibleRowCount = instance.getData().length;\n // `getSourceData()` always returns every row, filtered or not\n const totalRowCount = instance.getSourceData().length;\n\n rowCountInfo.textContent = `Showing ${visibleRowCount} of ${totalRowCount} rows.`;\n}\n\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n // `afterFilter()` fires after Handsontable applies the filters\n afterFilter() {\n updateRowCountInfo(this);\n },\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\nupdateRowCountInfo(hot);","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleGetFilteredData.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.js.json
index 7659588ba..c88333663 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · External quick filter · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","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-53ad929-20260908\",\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
Select a column: \n
\n Brand \n \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('#exampleQuickFilter');\nconst filterField = document.querySelector('#filterField');\n\n// Custom dropdown logic\nconst trigger = document.getElementById('filterTrigger');\nconst menu = document.getElementById('filterMenu');\nconst label = document.getElementById('filterTriggerLabel');\nlet selectedColumn = '0';\n\ntrigger.addEventListener('click', () => {\n const open = trigger.getAttribute('aria-expanded') === 'true';\n\n trigger.setAttribute('aria-expanded', String(!open));\n menu.hidden = open;\n});\n\nmenu.addEventListener('click', (e) => {\n const li = e.target.closest('li[data-value]');\n\n if (!li) return;\n\n menu.querySelectorAll('li').forEach((el) => el.removeAttribute('aria-selected'));\n li.setAttribute('aria-selected', 'true');\n selectedColumn = li.dataset.value;\n label.textContent = li.textContent.trim();\n trigger.setAttribute('aria-expanded', 'false');\n menu.hidden = true;\n});\n\ndocument.addEventListener('click', (e) => {\n if (!e.target.closest('#filterDropdown')) {\n trigger.setAttribute('aria-expanded', 'false');\n menu.hidden = true;\n }\n});\n\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n colHeaders: true,\n height: 'auto',\n filters: true,\n className: 'exampleQuickFilter',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// add a filter input listener\nfilterField.addEventListener('keyup', (event) => {\n const filters = hot.getPlugin('filters');\n\n filters.removeConditions(selectedColumn);\n filters.addCondition(selectedColumn, 'contains', [event.target.value]);\n filters.filter();\n hot.render();\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".controlsQuickFilter {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin: 0;\n padding: 0;\n}\n\n#filterField {\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n background: none;\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.4rem 0.625rem;\n outline: none;\n width: 140px;\n}\n\n#filterField::placeholder {\n color: var(--sl-color-gray-3, #777777);\n}\n\n#filterField:focus {\n border-color: var(--sl-color-accent, #1A42E8);\n}\n\n#filterField:focus-visible {\n border-color: var(--sl-color-accent, #1A42E8);\n box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Filter dropdown */\n.filter-dropdown {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.filter-dropdown-label {\n color: var(--sl-color-gray-2, #555555);\n font-size: var(--sl-text-sm, 0.875rem);\n white-space: nowrap;\n}\n\n.filter-dropdown-trigger {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n color: var(--sl-color-gray-2, #555555);\n cursor: pointer;\n font-size: var(--sl-text-sm, 0.875rem);\n font-weight: 500;\n padding: 0.4rem 0.625rem;\n transition: color 0.15s, background-color 0.15s;\n white-space: nowrap;\n border-radius: 0;\n}\n\n.filter-dropdown-trigger:hover {\n color: var(--sl-color-white, #333333);\n background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.filter-dropdown-chevron {\n flex-shrink: 0;\n margin-inline-start: 0.15rem;\n transition: transform 0.15s;\n}\n\n.filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron {\n transform: rotate(180deg);\n}\n\n.filter-dropdown-menu {\n background: var(--sl-color-bg-nav, #ffffff);\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n box-shadow: none;\n inset-inline-start: 0;\n list-style: none;\n margin: 0;\n min-width: 100%;\n overflow-y: auto;\n padding: 0;\n position: absolute;\n top: 100%;\n z-index: 9999;\n}\n\n.filter-dropdown-menu[hidden] {\n display: none !important;\n}\n\n.filter-dropdown-menu li {\n align-items: center;\n color: var(--sl-color-text, #333333);\n display: flex;\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.5rem 0.75rem;\n cursor: pointer;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n transition: background 0.1s, color 0.1s;\n white-space: nowrap;\n list-style: none;\n margin: 0;\n}\n\n.filter-dropdown-menu li:last-child {\n border-bottom: none;\n}\n\n.filter-dropdown-menu li:hover,\n.filter-dropdown-menu li:focus-visible {\n background: var(--sl-color-gray-6, #eeeeee);\n color: var(--sl-color-white, #333333);\n outline: none;\n}\n\n.filter-dropdown-menu li[aria-selected='true'] {\n color: var(--sl-color-white, #333333);\n box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleQuickFilter.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleQuickFilter","exampleTitle":"External quick filter","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · External quick filter · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","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-5680ec8-20260909\",\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
Select a column: \n
\n Brand \n \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('#exampleQuickFilter');\nconst filterField = document.querySelector('#filterField');\n\n// Custom dropdown logic\nconst trigger = document.getElementById('filterTrigger');\nconst menu = document.getElementById('filterMenu');\nconst label = document.getElementById('filterTriggerLabel');\nlet selectedColumn = '0';\n\ntrigger.addEventListener('click', () => {\n const open = trigger.getAttribute('aria-expanded') === 'true';\n\n trigger.setAttribute('aria-expanded', String(!open));\n menu.hidden = open;\n});\n\nmenu.addEventListener('click', (e) => {\n const li = e.target.closest('li[data-value]');\n\n if (!li) return;\n\n menu.querySelectorAll('li').forEach((el) => el.removeAttribute('aria-selected'));\n li.setAttribute('aria-selected', 'true');\n selectedColumn = li.dataset.value;\n label.textContent = li.textContent.trim();\n trigger.setAttribute('aria-expanded', 'false');\n menu.hidden = true;\n});\n\ndocument.addEventListener('click', (e) => {\n if (!e.target.closest('#filterDropdown')) {\n trigger.setAttribute('aria-expanded', 'false');\n menu.hidden = true;\n }\n});\n\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n colHeaders: true,\n height: 'auto',\n filters: true,\n className: 'exampleQuickFilter',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// add a filter input listener\nfilterField.addEventListener('keyup', (event) => {\n const filters = hot.getPlugin('filters');\n\n filters.removeConditions(selectedColumn);\n filters.addCondition(selectedColumn, 'contains', [event.target.value]);\n filters.filter();\n hot.render();\n});","/src/main.js":"import \"../styles.css\";\nimport \"../index.js\";","/styles.css":".controlsQuickFilter {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin: 0;\n padding: 0;\n}\n\n#filterField {\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n background: none;\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.4rem 0.625rem;\n outline: none;\n width: 140px;\n}\n\n#filterField::placeholder {\n color: var(--sl-color-gray-3, #777777);\n}\n\n#filterField:focus {\n border-color: var(--sl-color-accent, #1A42E8);\n}\n\n#filterField:focus-visible {\n border-color: var(--sl-color-accent, #1A42E8);\n box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Filter dropdown */\n.filter-dropdown {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.filter-dropdown-label {\n color: var(--sl-color-gray-2, #555555);\n font-size: var(--sl-text-sm, 0.875rem);\n white-space: nowrap;\n}\n\n.filter-dropdown-trigger {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n color: var(--sl-color-gray-2, #555555);\n cursor: pointer;\n font-size: var(--sl-text-sm, 0.875rem);\n font-weight: 500;\n padding: 0.4rem 0.625rem;\n transition: color 0.15s, background-color 0.15s;\n white-space: nowrap;\n border-radius: 0;\n}\n\n.filter-dropdown-trigger:hover {\n color: var(--sl-color-white, #333333);\n background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.filter-dropdown-chevron {\n flex-shrink: 0;\n margin-inline-start: 0.15rem;\n transition: transform 0.15s;\n}\n\n.filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron {\n transform: rotate(180deg);\n}\n\n.filter-dropdown-menu {\n background: var(--sl-color-bg-nav, #ffffff);\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n box-shadow: none;\n inset-inline-start: 0;\n list-style: none;\n margin: 0;\n min-width: 100%;\n overflow-y: auto;\n padding: 0;\n position: absolute;\n top: 100%;\n z-index: 9999;\n}\n\n.filter-dropdown-menu[hidden] {\n display: none !important;\n}\n\n.filter-dropdown-menu li {\n align-items: center;\n color: var(--sl-color-text, #333333);\n display: flex;\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.5rem 0.75rem;\n cursor: pointer;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n transition: background 0.1s, color 0.1s;\n white-space: nowrap;\n list-style: none;\n margin: 0;\n}\n\n.filter-dropdown-menu li:last-child {\n border-bottom: none;\n}\n\n.filter-dropdown-menu li:hover,\n.filter-dropdown-menu li:focus-visible {\n background: var(--sl-color-gray-6, #eeeeee);\n color: var(--sl-color-white, #333333);\n outline: none;\n}\n\n.filter-dropdown-menu li[aria-selected='true'] {\n color: var(--sl-color-white, #333333);\n box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleQuickFilter.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleQuickFilter","exampleTitle":"External quick filter","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.ts.json
index 5330f3976..79aa71514 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleQuickFilter.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · External quick filter · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","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-53ad929-20260908\",\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
Select a column: \n
\n Brand \n \n \n
\n
\n
\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleQuickFilter')!;\nconst filterField = document.querySelector('#filterField')!;\n\n// Custom dropdown logic\nconst trigger = document.getElementById('filterTrigger')!;\nconst menu = document.getElementById('filterMenu')!;\nconst label = document.getElementById('filterTriggerLabel')!;\nlet selectedColumn: string = '0';\n\ntrigger.addEventListener('click', () => {\n const open = trigger.getAttribute('aria-expanded') === 'true';\n\n trigger.setAttribute('aria-expanded', String(!open));\n (menu as HTMLElement).hidden = open;\n});\n\nmenu.addEventListener('click', (e: Event) => {\n const li = (e.target as HTMLElement).closest('li[data-value]') as HTMLElement | null;\n\n if (!li) return;\n\n menu.querySelectorAll('li').forEach((el) => el.removeAttribute('aria-selected'));\n li.setAttribute('aria-selected', 'true');\n selectedColumn = li.dataset.value!;\n label.textContent = li.textContent!.trim();\n trigger.setAttribute('aria-expanded', 'false');\n (menu as HTMLElement).hidden = true;\n});\n\ndocument.addEventListener('click', (e: Event) => {\n if (!(e.target as HTMLElement).closest('#filterDropdown')) {\n trigger.setAttribute('aria-expanded', 'false');\n (menu as HTMLElement).hidden = true;\n }\n});\n\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n colHeaders: true,\n height: 'auto',\n filters: true,\n className: 'exampleQuickFilter',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// add a filter input listener\nfilterField.addEventListener('keyup', (event) => {\n const filters: Filters = hot.getPlugin('filters');\n\n filters.removeConditions(selectedColumn as unknown as number);\n filters.addCondition(selectedColumn as unknown as number, 'contains', [(event.target as HTMLInputElement).value]);\n filters.filter();\n hot.render();\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".controlsQuickFilter {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin: 0;\n padding: 0;\n}\n\n#filterField {\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n background: none;\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.4rem 0.625rem;\n outline: none;\n width: 140px;\n}\n\n#filterField::placeholder {\n color: var(--sl-color-gray-3, #777777);\n}\n\n#filterField:focus {\n border-color: var(--sl-color-accent, #1A42E8);\n}\n\n#filterField:focus-visible {\n border-color: var(--sl-color-accent, #1A42E8);\n box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Filter dropdown */\n.filter-dropdown {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.filter-dropdown-label {\n color: var(--sl-color-gray-2, #555555);\n font-size: var(--sl-text-sm, 0.875rem);\n white-space: nowrap;\n}\n\n.filter-dropdown-trigger {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n color: var(--sl-color-gray-2, #555555);\n cursor: pointer;\n font-size: var(--sl-text-sm, 0.875rem);\n font-weight: 500;\n padding: 0.4rem 0.625rem;\n transition: color 0.15s, background-color 0.15s;\n white-space: nowrap;\n border-radius: 0;\n}\n\n.filter-dropdown-trigger:hover {\n color: var(--sl-color-white, #333333);\n background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.filter-dropdown-chevron {\n flex-shrink: 0;\n margin-inline-start: 0.15rem;\n transition: transform 0.15s;\n}\n\n.filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron {\n transform: rotate(180deg);\n}\n\n.filter-dropdown-menu {\n background: var(--sl-color-bg-nav, #ffffff);\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n box-shadow: none;\n inset-inline-start: 0;\n list-style: none;\n margin: 0;\n min-width: 100%;\n overflow-y: auto;\n padding: 0;\n position: absolute;\n top: 100%;\n z-index: 9999;\n}\n\n.filter-dropdown-menu[hidden] {\n display: none !important;\n}\n\n.filter-dropdown-menu li {\n align-items: center;\n color: var(--sl-color-text, #333333);\n display: flex;\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.5rem 0.75rem;\n cursor: pointer;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n transition: background 0.1s, color 0.1s;\n white-space: nowrap;\n list-style: none;\n margin: 0;\n}\n\n.filter-dropdown-menu li:last-child {\n border-bottom: none;\n}\n\n.filter-dropdown-menu li:hover,\n.filter-dropdown-menu li:focus-visible {\n background: var(--sl-color-gray-6, #eeeeee);\n color: var(--sl-color-white, #333333);\n outline: none;\n}\n\n.filter-dropdown-menu li[aria-selected='true'] {\n color: var(--sl-color-white, #333333);\n box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleQuickFilter.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleQuickFilter","exampleTitle":"External quick filter","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · External quick filter · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","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-5680ec8-20260909\",\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
Select a column: \n
\n Brand \n \n \n
\n
\n
\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleQuickFilter')!;\nconst filterField = document.querySelector('#filterField')!;\n\n// Custom dropdown logic\nconst trigger = document.getElementById('filterTrigger')!;\nconst menu = document.getElementById('filterMenu')!;\nconst label = document.getElementById('filterTriggerLabel')!;\nlet selectedColumn: string = '0';\n\ntrigger.addEventListener('click', () => {\n const open = trigger.getAttribute('aria-expanded') === 'true';\n\n trigger.setAttribute('aria-expanded', String(!open));\n (menu as HTMLElement).hidden = open;\n});\n\nmenu.addEventListener('click', (e: Event) => {\n const li = (e.target as HTMLElement).closest('li[data-value]') as HTMLElement | null;\n\n if (!li) return;\n\n menu.querySelectorAll('li').forEach((el) => el.removeAttribute('aria-selected'));\n li.setAttribute('aria-selected', 'true');\n selectedColumn = li.dataset.value!;\n label.textContent = li.textContent!.trim();\n trigger.setAttribute('aria-expanded', 'false');\n (menu as HTMLElement).hidden = true;\n});\n\ndocument.addEventListener('click', (e: Event) => {\n if (!(e.target as HTMLElement).closest('#filterDropdown')) {\n trigger.setAttribute('aria-expanded', 'false');\n (menu as HTMLElement).hidden = true;\n }\n});\n\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '13:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n colHeaders: true,\n height: 'auto',\n filters: true,\n className: 'exampleQuickFilter',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// add a filter input listener\nfilterField.addEventListener('keyup', (event) => {\n const filters: Filters = hot.getPlugin('filters');\n\n filters.removeConditions(selectedColumn as unknown as number);\n filters.addCondition(selectedColumn as unknown as number, 'contains', [(event.target as HTMLInputElement).value]);\n filters.filter();\n hot.render();\n});","/src/main.ts":"import \"../styles.css\";\nimport \"../index.ts\";","/styles.css":".controlsQuickFilter {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin: 0;\n padding: 0;\n}\n\n#filterField {\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n background: none;\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.4rem 0.625rem;\n outline: none;\n width: 140px;\n}\n\n#filterField::placeholder {\n color: var(--sl-color-gray-3, #777777);\n}\n\n#filterField:focus {\n border-color: var(--sl-color-accent, #1A42E8);\n}\n\n#filterField:focus-visible {\n border-color: var(--sl-color-accent, #1A42E8);\n box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}\n\n/* Filter dropdown */\n.filter-dropdown {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.filter-dropdown-label {\n color: var(--sl-color-gray-2, #555555);\n font-size: var(--sl-text-sm, 0.875rem);\n white-space: nowrap;\n}\n\n.filter-dropdown-trigger {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n color: var(--sl-color-gray-2, #555555);\n cursor: pointer;\n font-size: var(--sl-text-sm, 0.875rem);\n font-weight: 500;\n padding: 0.4rem 0.625rem;\n transition: color 0.15s, background-color 0.15s;\n white-space: nowrap;\n border-radius: 0;\n}\n\n.filter-dropdown-trigger:hover {\n color: var(--sl-color-white, #333333);\n background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n}\n\n.filter-dropdown-chevron {\n flex-shrink: 0;\n margin-inline-start: 0.15rem;\n transition: transform 0.15s;\n}\n\n.filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron {\n transform: rotate(180deg);\n}\n\n.filter-dropdown-menu {\n background: var(--sl-color-bg-nav, #ffffff);\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n box-shadow: none;\n inset-inline-start: 0;\n list-style: none;\n margin: 0;\n min-width: 100%;\n overflow-y: auto;\n padding: 0;\n position: absolute;\n top: 100%;\n z-index: 9999;\n}\n\n.filter-dropdown-menu[hidden] {\n display: none !important;\n}\n\n.filter-dropdown-menu li {\n align-items: center;\n color: var(--sl-color-text, #333333);\n display: flex;\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.5rem 0.75rem;\n cursor: pointer;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n transition: background 0.1s, color 0.1s;\n white-space: nowrap;\n list-style: none;\n margin: 0;\n}\n\n.filter-dropdown-menu li:last-child {\n border-bottom: none;\n}\n\n.filter-dropdown-menu li:hover,\n.filter-dropdown-menu li:focus-visible {\n background: var(--sl-color-gray-6, #eeeeee);\n color: var(--sl-color-white, #333333);\n outline: none;\n}\n\n.filter-dropdown-menu li[aria-selected='true'] {\n color: var(--sl-color-white, #333333);\n box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n}"},"docsPath":"guides/columns/column-filter/javascript/exampleQuickFilter.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleQuickFilter","exampleTitle":"External quick filter","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.js.json
index 3bb4f7332..5b86b8391 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Save and restore filter settings · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 Filter: price > $200 \n Save filter settings \n Clear filters \n Restore filter settings \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('#exampleSaveRestoreFilters');\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n// get the `Filters` plugin, so you can use its API\nconst filters = hot.getPlugin('filters');\nlet savedConditions = [];\ndocument.querySelector('.applySampleFilter').addEventListener('click', () => {\n filters.clearConditions();\n // filter the 'Price' column (column at index 2) for items over $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n});\ndocument.querySelector('.saveFilters').addEventListener('click', () => {\n // `exportConditions()` returns the current conditions, keyed by physical column index\n savedConditions = filters.exportConditions();\n});\ndocument.querySelector('.clearFilters').addEventListener('click', () => {\n filters.clearConditions();\n filters.filter();\n});\ndocument.querySelector('.restoreFilters').addEventListener('click', () => {\n // `importConditions()` expects the same physical-column-indexed structure\n filters.importConditions(savedConditions);\n filters.filter();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSaveRestoreFilters.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Save and restore filter settings · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 Filter: price > $200 \n Save filter settings \n Clear filters \n Restore filter settings \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('#exampleSaveRestoreFilters');\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n// get the `Filters` plugin, so you can use its API\nconst filters = hot.getPlugin('filters');\nlet savedConditions = [];\ndocument.querySelector('.applySampleFilter').addEventListener('click', () => {\n filters.clearConditions();\n // filter the 'Price' column (column at index 2) for items over $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n});\ndocument.querySelector('.saveFilters').addEventListener('click', () => {\n // `exportConditions()` returns the current conditions, keyed by physical column index\n savedConditions = filters.exportConditions();\n});\ndocument.querySelector('.clearFilters').addEventListener('click', () => {\n filters.clearConditions();\n filters.filter();\n});\ndocument.querySelector('.restoreFilters').addEventListener('click', () => {\n // `importConditions()` expects the same physical-column-indexed structure\n filters.importConditions(savedConditions);\n filters.filter();\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSaveRestoreFilters.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.ts.json
index d341b2575..2602ae2ed 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSaveRestoreFilters.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Save and restore filter settings · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 Filter: price > $200 \n Save filter settings \n Clear filters \n Restore filter settings \n
\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\nimport type { ColumnConditions } from 'handsontable/plugins/filters';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSaveRestoreFilters')!;\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// get the `Filters` plugin, so you can use its API\nconst filters: Filters = hot.getPlugin('filters');\nlet savedConditions: ColumnConditions[] = [];\n\ndocument.querySelector('.applySampleFilter')!.addEventListener('click', () => {\n filters.clearConditions();\n // filter the 'Price' column (column at index 2) for items over $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n});\n\ndocument.querySelector('.saveFilters')!.addEventListener('click', () => {\n // `exportConditions()` returns the current conditions, keyed by physical column index\n savedConditions = filters.exportConditions();\n});\n\ndocument.querySelector('.clearFilters')!.addEventListener('click', () => {\n filters.clearConditions();\n filters.filter();\n});\n\ndocument.querySelector('.restoreFilters')!.addEventListener('click', () => {\n // `importConditions()` expects the same physical-column-indexed structure\n filters.importConditions(savedConditions);\n filters.filter();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSaveRestoreFilters.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Save and restore filter settings · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 Filter: price > $200 \n Save filter settings \n Clear filters \n Restore filter settings \n
\n
\n \n\n","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Filters } from 'handsontable/plugins';\nimport type { ColumnConditions } from 'handsontable/plugins/filters';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#exampleSaveRestoreFilters')!;\nconst hot = new Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});\n\n// get the `Filters` plugin, so you can use its API\nconst filters: Filters = hot.getPlugin('filters');\nlet savedConditions: ColumnConditions[] = [];\n\ndocument.querySelector('.applySampleFilter')!.addEventListener('click', () => {\n filters.clearConditions();\n // filter the 'Price' column (column at index 2) for items over $200\n filters.addCondition(2, 'gt', [200]);\n filters.filter();\n});\n\ndocument.querySelector('.saveFilters')!.addEventListener('click', () => {\n // `exportConditions()` returns the current conditions, keyed by physical column index\n savedConditions = filters.exportConditions();\n});\n\ndocument.querySelector('.clearFilters')!.addEventListener('click', () => {\n filters.clearConditions();\n filters.filter();\n});\n\ndocument.querySelector('.restoreFilters')!.addEventListener('click', () => {\n // `importConditions()` expects the same physical-column-indexed structure\n filters.importConditions(savedConditions);\n filters.filter();\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSaveRestoreFilters.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.js.json
index ba2c5091a..3979beb47 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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('#exampleSearchMode');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering with option\n filters: {\n searchMode: 'apply',\n },\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSearchMode.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSearchMode","exampleTitle":"Enable filtering within already filtered results","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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('#exampleSearchMode');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering with option\n filters: {\n searchMode: 'apply',\n },\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSearchMode.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSearchMode","exampleTitle":"Enable filtering within already filtered results","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.ts.json
index 279fd913f..e55127e8c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleSearchMode.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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('#exampleSearchMode')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering with option\n filters: {\n searchMode: 'apply',\n },\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSearchMode.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSearchMode","exampleTitle":"Enable filtering within already filtered results","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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('#exampleSearchMode')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering with option\n filters: {\n searchMode: 'apply',\n },\n dropdownMenu: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleSearchMode.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSearchMode","exampleTitle":"Enable filtering within already filtered results","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.js.json
index a2c52855b..2fd6ea24e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Server-side filtering · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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('#exampleServerSideFilter');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n // `beforeFilter()` is a Handsontable hook\n // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n beforeFilter(conditionsStack) {\n // gather information about the filters\n console.log(`The amount of filters: ${conditionsStack.length}`);\n\n // when the filters are cleared, the conditions stack is empty\n const [lastChanged] = conditionsStack;\n\n if (lastChanged) {\n console.log(`The last changed column index: ${lastChanged.column}`);\n console.log(`The amount of filters added to this column: ${lastChanged.conditions.length}`);\n // the list of filter conditions\n console.log(lastChanged.conditions);\n }\n\n // return `false` to disable filtering on the client side\n return false;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleServerSideFilter.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Server-side filtering · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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('#exampleServerSideFilter');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n // `beforeFilter()` is a Handsontable hook\n // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n beforeFilter(conditionsStack) {\n // gather information about the filters\n console.log(`The amount of filters: ${conditionsStack.length}`);\n\n // when the filters are cleared, the conditions stack is empty\n const [lastChanged] = conditionsStack;\n\n if (lastChanged) {\n console.log(`The last changed column index: ${lastChanged.column}`);\n console.log(`The amount of filters added to this column: ${lastChanged.conditions.length}`);\n // the list of filter conditions\n console.log(lastChanged.conditions);\n }\n\n // return `false` to disable filtering on the client side\n return false;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleServerSideFilter.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.ts.json
index 20fae874f..1d39c1a7f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleServerSideFilter.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Server-side filtering · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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('#exampleServerSideFilter')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n // `beforeFilter()` is a Handsontable hook\n // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n beforeFilter(conditionsStack) {\n // gather information about the filters\n console.log(`The amount of filters: ${conditionsStack.length}`);\n\n // when the filters are cleared, the conditions stack is empty\n const [lastChanged] = conditionsStack;\n\n if (lastChanged) {\n console.log(`The last changed column index: ${lastChanged.column}`);\n console.log(`The amount of filters added to this column: ${lastChanged.conditions.length}`);\n // the list of filter conditions\n console.log(lastChanged.conditions);\n }\n\n // return `false` to disable filtering on the client side\n return false;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleServerSideFilter.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Server-side filtering · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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('#exampleServerSideFilter')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu\n dropdownMenu: true,\n height: 'auto',\n // `beforeFilter()` is a Handsontable hook\n // it's fired after Handsontable gathers information about the filters, but before the filters are applied\n beforeFilter(conditionsStack) {\n // gather information about the filters\n console.log(`The amount of filters: ${conditionsStack.length}`);\n\n // when the filters are cleared, the conditions stack is empty\n const [lastChanged] = conditionsStack;\n\n if (lastChanged) {\n console.log(`The last changed column index: ${lastChanged.column}`);\n console.log(`The amount of filters added to this column: ${lastChanged.conditions.length}`);\n // the list of filter conditions\n console.log(lastChanged.conditions);\n }\n\n // return `false` to disable filtering on the client side\n return false;\n },\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleServerSideFilter.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.js.json
index c080b2eb1..bccc6c6fc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column filter · Enable filtering · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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('#exampleShowFilterItemsOnly');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu, but display only the filter menu items\n dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleShowFilterItemsOnly.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleShowFilterItemsOnly","exampleTitle":"Enable filtering","docPermalink":"/column-filter","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column filter · Enable filtering · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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('#exampleShowFilterItemsOnly');\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu, but display only the filter menu items\n dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-filter/javascript/exampleShowFilterItemsOnly.js","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleShowFilterItemsOnly","exampleTitle":"Enable filtering","docPermalink":"/column-filter","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.ts.json
index d5d3bf959..2fd055b2b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__javascript__exampleShowFilterItemsOnly.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column filter · Enable filtering · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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('#exampleShowFilterItemsOnly')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu, but display only the filter menu items\n dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleShowFilterItemsOnly.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleShowFilterItemsOnly","exampleTitle":"Enable filtering","docPermalink":"/column-filter","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column filter · Enable filtering · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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('#exampleShowFilterItemsOnly')!;\n\nnew Handsontable(container, {\n data: [\n {\n brand: 'Jetpulse',\n model: 'Racing Socks',\n price: 30,\n sellDate: '2023-10-11',\n sellTime: '01:23',\n inStock: false,\n },\n {\n brand: 'Gigabox',\n model: 'HL Mountain Frame',\n price: 1890.9,\n sellDate: '2023-05-03',\n sellTime: '11:27',\n inStock: false,\n },\n {\n brand: 'Camido',\n model: 'Cycling Cap',\n price: 130.1,\n sellDate: '2023-03-27',\n sellTime: '03:17',\n inStock: true,\n },\n {\n brand: 'Chatterpoint',\n model: 'Road Tire Tube',\n price: 59,\n sellDate: '2023-08-28',\n sellTime: '08:01',\n inStock: true,\n },\n {\n brand: 'Eidel',\n model: 'HL Road Tire',\n price: 279.99,\n sellDate: '2023-10-02',\n sellTime: '01:23',\n inStock: true,\n },\n ],\n columns: [\n {\n title: 'Brand',\n type: 'text',\n data: 'brand',\n },\n {\n title: 'Model',\n type: 'text',\n data: 'model',\n },\n {\n title: 'Price',\n type: 'numeric',\n data: 'price',\n locale: 'en-US',\n numericFormat: {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 2,\n },\n },\n {\n title: 'Date',\n type: 'intl-date',\n data: 'sellDate',\n locale: 'en-US',\n dateFormat: { month: 'short', day: 'numeric', year: 'numeric' },\n className: 'htRight',\n },\n {\n title: 'Time',\n type: 'intl-time',\n data: 'sellTime',\n locale: 'en-US',\n timeFormat: { hour: '2-digit', minute: '2-digit', hour12: true },\n className: 'htRight',\n },\n {\n title: 'In stock',\n type: 'checkbox',\n data: 'inStock',\n className: 'htCenter',\n },\n ],\n // enable filtering\n filters: true,\n // enable the column menu, but display only the filter menu items\n dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-filter/javascript/exampleShowFilterItemsOnly.ts","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleShowFilterItemsOnly","exampleTitle":"Enable filtering","docPermalink":"/column-filter","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleCustomFilterButton.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleCustomFilterButton.tsx.json
index bf2ce5ef0..597de123f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleCustomFilterButton.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleCustomFilterButton.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column filter · Customize the filter button · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","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-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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(\"exampleCustomFilterButton\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst 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(\"exampleCustomFilterButton\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst 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(\"exampleCustomFilterButton2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst 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(\"exampleCustomFilterButton2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst 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(\"exampleEnableFilterInColumns\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n // remove the column menu button from the 'Brand', 'Price', and 'Date' columns\n const removeColumnMenuButton = (col: number, TH: { querySelector: (value: string) => any }) => {\n if (col > 1) {\n const button = TH.querySelector('.changeType');\n\n if (!button) {\n return;\n }\n\n button.parentElement.removeChild(button);\n }\n };\n\n return (\n 0;\n },\n },\n filter_action_bar: {\n // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n hidden() {\n return this.getSelectedRangeLast()!.to.col > 0;\n },\n },\n clear_column: {\n // hide the 'Clear column' menu item from the first column\n hidden() {\n return this.getSelectedRangeLast()!.to.col < 1;\n },\n },\n },\n }}\n // `afterGetColHeader()` is a Handsontable hook\n // it's fired after Handsontable appends information about a column header to the table header\n afterGetColHeader={removeColumnMenuButton}\n height=\"auto\"\n autoWrapRow={true}\n autoWrapCol={true}\n licenseKey=\"non-commercial-and-evaluation\"\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleEnableFilterInColumns.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleEnableFilterInColumns","exampleTitle":"Enable filtering for individual columns","docPermalink":"/column-filter","lang":"React (TS)"}
+{"framework":"react","displayName":"Columns ▸ Column filter · Enable filtering for individual columns · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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(\"exampleEnableFilterInColumns\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n // remove the column menu button from the 'Brand', 'Price', and 'Date' columns\n const removeColumnMenuButton = (col: number, TH: { querySelector: (value: string) => any }) => {\n if (col > 1) {\n const button = TH.querySelector('.changeType');\n\n if (!button) {\n return;\n }\n\n button.parentElement.removeChild(button);\n }\n };\n\n return (\n 0;\n },\n },\n filter_action_bar: {\n // hide the 'OK' and 'Cancel' buttons from all columns but the first one\n hidden() {\n return this.getSelectedRangeLast()!.to.col > 0;\n },\n },\n clear_column: {\n // hide the 'Clear column' menu item from the first column\n hidden() {\n return this.getSelectedRangeLast()!.to.col < 1;\n },\n },\n },\n }}\n // `afterGetColHeader()` is a Handsontable hook\n // it's fired after Handsontable appends information about a column header to the table header\n afterGetColHeader={removeColumnMenuButton}\n height=\"auto\"\n autoWrapRow={true}\n autoWrapCol={true}\n licenseKey=\"non-commercial-and-evaluation\"\n />\n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/columns/column-filter/react/exampleEnableFilterInColumns.tsx","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleEnableFilterInColumns","exampleTitle":"Enable filtering for individual columns","docPermalink":"/column-filter","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleExcludeRowsFromFiltering.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleExcludeRowsFromFiltering.tsx.json
index cae5a3041..5292f31a2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleExcludeRowsFromFiltering.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__react__exampleExcludeRowsFromFiltering.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column filter · Exclude rows from filtering · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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(\"exampleExcludeRowsFromFiltering\"));\nroot.render(React.createElement(App));","/src/App.tsx":"// you need `useRef` to call Handsontable's instance methods\nimport { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n const exclude = () => {\n const hotInstance = hotTableComponentRef.current?.hotInstance;\n // @ts-ignore\n const filtersRowsMap = hotInstance?.getPlugin('filters').filtersRowsMap;\n\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(filtersRowsMap.getLength() - 1, false);\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(\"exampleExcludeRowsFromFiltering\"));\nroot.render(React.createElement(App));","/src/App.tsx":"// you need `useRef` to call Handsontable's instance methods\nimport { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n const exclude = () => {\n const hotInstance = hotTableComponentRef.current?.hotInstance;\n // @ts-ignore\n const filtersRowsMap = hotInstance?.getPlugin('filters').filtersRowsMap;\n\n filtersRowsMap.setValueAtIndex(0, false);\n filtersRowsMap.setValueAtIndex(filtersRowsMap.getLength() - 1, false);\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(\"exampleFilterBasicDemo\"));\nroot.render(React.createElement(App));","/src/App.tsx":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst 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(\"exampleFilterBasicDemo\"));\nroot.render(React.createElement(App));","/src/App.tsx":"// to import filtering as an individual module, see the 'Import the filtering module' section of this page\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst 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(\"exampleFilterDifferentTypes\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst 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(\"exampleFilterDifferentTypes\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst 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(\"exampleFilterOnInitialization\"));\nroot.render(React.createElement(App));","/src/App.tsx":"// you need `useRef` to call Handsontable's instance methods\nimport { useRef, useEffect } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n\n useEffect(() => {\n const handsontableInstance = hotTableComponentRef.current?.hotInstance;\n // get the `Filters` plugin, so you can use its API\n const filters = handsontableInstance?.getPlugin('filters');\n\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters?.addCondition(2, 'lt', [200]);\n filters?.filter();\n }, []);\n\n return (\n 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(\"exampleFilterOnInitialization\"));\nroot.render(React.createElement(App));","/src/App.tsx":"// you need `useRef` to call Handsontable's instance methods\nimport { useRef, useEffect } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n\n useEffect(() => {\n const handsontableInstance = hotTableComponentRef.current?.hotInstance;\n // get the `Filters` plugin, so you can use its API\n const filters = handsontableInstance?.getPlugin('filters');\n\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters?.addCondition(2, 'lt', [200]);\n filters?.filter();\n }, []);\n\n return (\n 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(\"exampleFilterThroughAPI1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n const filterBelow200 = () => {\n // get the `Filters` plugin, so you can use its API\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n // clear any existing filters\n filters?.clearConditions();\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters?.addCondition(2, 'lt', [200]);\n filters?.filter();\n };\n\n const filterAbove200 = () => {\n // get the `Filters` plugin, so you can use its API\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n filters?.clearConditions();\n // display only items that are more than ('gt') $200\n filters?.addCondition(2, 'gt', [200]);\n filters?.filter();\n };\n\n const clearAllFilters = () => {\n // get the `Filters` plugin, so you can use its API\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n // clear all filters\n filters?.clearConditions();\n filters?.filter();\n };\n\n return (\n <>\n \n
\n Show items < $200 \n Show items > $200 \n Clear filters \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(\"exampleFilterThroughAPI1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n const filterBelow200 = () => {\n // get the `Filters` plugin, so you can use its API\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n // clear any existing filters\n filters?.clearConditions();\n // filter data by the 'Price' column (column at index 2)\n // to display only items that are less than ('lt') $200\n filters?.addCondition(2, 'lt', [200]);\n filters?.filter();\n };\n\n const filterAbove200 = () => {\n // get the `Filters` plugin, so you can use its API\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n filters?.clearConditions();\n // display only items that are more than ('gt') $200\n filters?.addCondition(2, 'gt', [200]);\n filters?.filter();\n };\n\n const clearAllFilters = () => {\n // get the `Filters` plugin, so you can use its API\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n // clear all filters\n filters?.clearConditions();\n filters?.filter();\n };\n\n return (\n <>\n \n
\n Show items < $200 \n Show items > $200 \n Clear filters \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(\"exampleGetFilteredData\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n const [rowCountInfo, setRowCountInfo] = useState('');\n\n const updateRowCountInfo = () => {\n const hotInstance = hotTableComponentRef.current?.hotInstance;\n\n if (!hotInstance) {\n return;\n }\n\n // `getData()` returns only the rows that pass the current filters\n // `getSourceData()` always returns every row, filtered or not\n setRowCountInfo(`Showing ${hotInstance.getData().length} of ${hotInstance.getSourceData().length} rows.`);\n };\n\n return (\n <>\n {rowCountInfo}
\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(\"exampleGetFilteredData\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n const [rowCountInfo, setRowCountInfo] = useState('');\n\n const updateRowCountInfo = () => {\n const hotInstance = hotTableComponentRef.current?.hotInstance;\n\n if (!hotInstance) {\n return;\n }\n\n // `getData()` returns only the rows that pass the current filters\n // `getSourceData()` always returns every row, filtered or not\n setRowCountInfo(`Showing ${hotInstance.getData().length} of ${hotInstance.getSourceData().length} rows.`);\n };\n\n return (\n <>\n {rowCountInfo}
\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(\"exampleQuickFilter\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// Embedded so the example is self-contained in bundler environments.\nconst QUICK_FILTER_STYLES = `\n .controlsQuickFilter {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin: 0;\n padding: 0;\n }\n #filterField {\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n background: none;\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.4rem 0.625rem;\n outline: none;\n width: 140px;\n }\n #filterField::placeholder { color: var(--sl-color-gray-3, #777777); }\n #filterField:focus { border-color: var(--sl-color-accent, #1A42E8); }\n #filterField:focus-visible {\n border-color: var(--sl-color-accent, #1A42E8);\n box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n }\n .filter-dropdown {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n }\n .filter-dropdown-label {\n color: var(--sl-color-gray-2, #555555);\n font-size: var(--sl-text-sm, 0.875rem);\n white-space: nowrap;\n }\n .filter-dropdown-trigger {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n color: var(--sl-color-gray-2, #555555);\n cursor: pointer;\n font-size: var(--sl-text-sm, 0.875rem);\n font-weight: 500;\n padding: 0.4rem 0.625rem;\n transition: color 0.15s, background-color 0.15s;\n white-space: nowrap;\n border-radius: 0;\n }\n .filter-dropdown-trigger:hover {\n color: var(--sl-color-white, #333333);\n background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n }\n .filter-dropdown-chevron {\n flex-shrink: 0;\n margin-inline-start: 0.15rem;\n transition: transform 0.15s;\n }\n .filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron { transform: rotate(180deg); }\n .filter-dropdown-menu {\n background: var(--sl-color-bg-nav, #ffffff);\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n box-shadow: none;\n inset-inline-start: 0;\n list-style: none;\n margin: 0;\n min-width: 100%;\n overflow-y: auto;\n padding: 0;\n position: absolute;\n top: 100%;\n z-index: 9999;\n }\n .filter-dropdown-menu li {\n align-items: center;\n color: var(--sl-color-text, #333333);\n display: flex;\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.5rem 0.75rem;\n cursor: pointer;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n transition: background 0.1s, color 0.1s;\n white-space: nowrap;\n list-style: none;\n margin: 0;\n }\n .filter-dropdown-menu li:last-child { border-bottom: none; }\n .filter-dropdown-menu li:hover,\n .filter-dropdown-menu li:focus-visible {\n background: var(--sl-color-gray-6, #eeeeee);\n color: var(--sl-color-white, #333333);\n outline: none;\n }\n .filter-dropdown-menu li[aria-selected='true'] {\n color: var(--sl-color-white, #333333);\n box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n }\n`;\n\nconst columnOptions = [\n { value: '0', label: 'Brand' },\n { value: '1', label: 'Model' },\n { value: '2', label: 'Price' },\n { value: '3', label: 'Date' },\n { value: '4', label: 'Time' },\n { value: '5', label: 'In stock' },\n];\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n const dropdownRef = useRef(null);\n const [selectedColumn, setSelectedColumn] = useState('0');\n const [open, setOpen] = useState(false);\n\n useEffect(() => {\n const handleClickOutside = (e: MouseEvent) => {\n if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n setOpen(false);\n }\n };\n\n document.addEventListener('click', handleClickOutside);\n\n return () => document.removeEventListener('click', handleClickOutside);\n }, []);\n\n const handleFilter = (event: React.KeyboardEvent) => {\n const handsontableInstance = hotTableComponentRef.current?.hotInstance;\n const filtersPlugin = handsontableInstance?.getPlugin('filters');\n\n filtersPlugin?.removeConditions(Number(selectedColumn));\n filtersPlugin?.addCondition(Number(selectedColumn), 'contains', [(event.target as HTMLInputElement).value]);\n filtersPlugin?.filter();\n handsontableInstance?.render();\n };\n\n const handleSelect = (col: { value: string; label: string }) => {\n setSelectedColumn(col.value);\n setOpen(false);\n };\n\n const selectedLabel = columnOptions.find((c) => c.value === selectedColumn)?.label || 'Brand';\n\n return (\n <>\n \n \n
\n
\n
Select a column: \n
setOpen(!open)}\n >\n {selectedLabel} \n \n {columnOptions.map((col) => (\n handleSelect(col)}\n >\n {col.label}\n \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 \"./styles.css\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"exampleQuickFilter\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef, useState } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// Embedded so the example is self-contained in bundler environments.\nconst QUICK_FILTER_STYLES = `\n .controlsQuickFilter {\n position: relative;\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin: 0;\n padding: 0;\n }\n #filterField {\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n background: none;\n color: var(--sl-color-text, #333333);\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.4rem 0.625rem;\n outline: none;\n width: 140px;\n }\n #filterField::placeholder { color: var(--sl-color-gray-3, #777777); }\n #filterField:focus { border-color: var(--sl-color-accent, #1A42E8); }\n #filterField:focus-visible {\n border-color: var(--sl-color-accent, #1A42E8);\n box-shadow: 0 0 0 1px var(--sl-color-accent, #1A42E8);\n }\n .filter-dropdown {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n }\n .filter-dropdown-label {\n color: var(--sl-color-gray-2, #555555);\n font-size: var(--sl-text-sm, 0.875rem);\n white-space: nowrap;\n }\n .filter-dropdown-trigger {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n background: none;\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n color: var(--sl-color-gray-2, #555555);\n cursor: pointer;\n font-size: var(--sl-text-sm, 0.875rem);\n font-weight: 500;\n padding: 0.4rem 0.625rem;\n transition: color 0.15s, background-color 0.15s;\n white-space: nowrap;\n border-radius: 0;\n }\n .filter-dropdown-trigger:hover {\n color: var(--sl-color-white, #333333);\n background: var(--sl-color-gray-7, var(--sl-color-gray-6, #eeeeee));\n }\n .filter-dropdown-chevron {\n flex-shrink: 0;\n margin-inline-start: 0.15rem;\n transition: transform 0.15s;\n }\n .filter-dropdown-trigger[aria-expanded='true'] .filter-dropdown-chevron { transform: rotate(180deg); }\n .filter-dropdown-menu {\n background: var(--sl-color-bg-nav, #ffffff);\n border: 1px solid var(--sl-color-gray-5, #e0e0e0);\n border-radius: 0;\n box-shadow: none;\n inset-inline-start: 0;\n list-style: none;\n margin: 0;\n min-width: 100%;\n overflow-y: auto;\n padding: 0;\n position: absolute;\n top: 100%;\n z-index: 9999;\n }\n .filter-dropdown-menu li {\n align-items: center;\n color: var(--sl-color-text, #333333);\n display: flex;\n font-size: var(--sl-text-sm, 0.875rem);\n padding: 0.5rem 0.75rem;\n cursor: pointer;\n border-bottom: 1px solid var(--sl-color-gray-5, #e0e0e0);\n transition: background 0.1s, color 0.1s;\n white-space: nowrap;\n list-style: none;\n margin: 0;\n }\n .filter-dropdown-menu li:last-child { border-bottom: none; }\n .filter-dropdown-menu li:hover,\n .filter-dropdown-menu li:focus-visible {\n background: var(--sl-color-gray-6, #eeeeee);\n color: var(--sl-color-white, #333333);\n outline: none;\n }\n .filter-dropdown-menu li[aria-selected='true'] {\n color: var(--sl-color-white, #333333);\n box-shadow: inset 0 0 0 1px var(--sl-color-accent, #1A42E8);\n }\n`;\n\nconst columnOptions = [\n { value: '0', label: 'Brand' },\n { value: '1', label: 'Model' },\n { value: '2', label: 'Price' },\n { value: '3', label: 'Date' },\n { value: '4', label: 'Time' },\n { value: '5', label: 'In stock' },\n];\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n const dropdownRef = useRef(null);\n const [selectedColumn, setSelectedColumn] = useState('0');\n const [open, setOpen] = useState(false);\n\n useEffect(() => {\n const handleClickOutside = (e: MouseEvent) => {\n if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {\n setOpen(false);\n }\n };\n\n document.addEventListener('click', handleClickOutside);\n\n return () => document.removeEventListener('click', handleClickOutside);\n }, []);\n\n const handleFilter = (event: React.KeyboardEvent) => {\n const handsontableInstance = hotTableComponentRef.current?.hotInstance;\n const filtersPlugin = handsontableInstance?.getPlugin('filters');\n\n filtersPlugin?.removeConditions(Number(selectedColumn));\n filtersPlugin?.addCondition(Number(selectedColumn), 'contains', [(event.target as HTMLInputElement).value]);\n filtersPlugin?.filter();\n handsontableInstance?.render();\n };\n\n const handleSelect = (col: { value: string; label: string }) => {\n setSelectedColumn(col.value);\n setOpen(false);\n };\n\n const selectedLabel = columnOptions.find((c) => c.value === selectedColumn)?.label || 'Brand';\n\n return (\n <>\n \n \n
\n
\n
Select a column: \n
setOpen(!open)}\n >\n {selectedLabel} \n \n {columnOptions.map((col) => (\n handleSelect(col)}\n >\n {col.label}\n \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(\"exampleSaveRestoreFilters\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { ColumnConditions } from 'handsontable/plugins/filters';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n const savedConditions = useRef([]);\n\n const applySampleFilter = () => {\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n filters?.clearConditions();\n // filter the 'Price' column (column at index 2) for items over $200\n filters?.addCondition(2, 'gt', [200]);\n filters?.filter();\n };\n\n const saveFilters = () => {\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n // `exportConditions()` returns the current conditions, keyed by physical column index\n savedConditions.current = filters?.exportConditions() ?? [];\n };\n\n const clearFilters = () => {\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n filters?.clearConditions();\n filters?.filter();\n };\n\n const restoreFilters = () => {\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n // `importConditions()` expects the same physical-column-indexed structure\n filters?.importConditions(savedConditions.current);\n filters?.filter();\n };\n\n return (\n <>\n \n
\n Filter: price > $200 \n Save filter settings \n Clear filters \n Restore filter settings \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(\"exampleSaveRestoreFilters\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { ColumnConditions } from 'handsontable/plugins/filters';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst ExampleComponent = () => {\n const hotTableComponentRef = useRef(null);\n const savedConditions = useRef([]);\n\n const applySampleFilter = () => {\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n filters?.clearConditions();\n // filter the 'Price' column (column at index 2) for items over $200\n filters?.addCondition(2, 'gt', [200]);\n filters?.filter();\n };\n\n const saveFilters = () => {\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n // `exportConditions()` returns the current conditions, keyed by physical column index\n savedConditions.current = filters?.exportConditions() ?? [];\n };\n\n const clearFilters = () => {\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n filters?.clearConditions();\n filters?.filter();\n };\n\n const restoreFilters = () => {\n const filters = hotTableComponentRef.current?.hotInstance?.getPlugin('filters');\n\n // `importConditions()` expects the same physical-column-indexed structure\n filters?.importConditions(savedConditions.current);\n filters?.filter();\n };\n\n return (\n <>\n \n
\n Filter: price > $200 \n Save filter settings \n Clear filters \n Restore filter settings \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(\"exampleSearchMode\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst 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(\"exampleSearchMode\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst 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(\"exampleServerSideFilter\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst 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(\"exampleServerSideFilter\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst 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(\"exampleShowFilterItemsOnly\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst 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(\"exampleShowFilterItemsOnly\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst 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(\"#exampleCustomFilterButton\");","/src/App.vue":"\n\n\n \n
\n \n\n"},"docsPath":"guides/columns/column-filter/vue/exampleCustomFilterButton.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton","exampleTitle":"Customize the filter button","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Customize the filter button · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleCustomFilterButton\");","/src/App.vue":"\n\n\n \n
\n \n\n"},"docsPath":"guides/columns/column-filter/vue/exampleCustomFilterButton.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton","exampleTitle":"Customize the filter button","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleCustomFilterButton2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleCustomFilterButton2.vue.json
index 251bb4a85..a805340d7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleCustomFilterButton2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleCustomFilterButton2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Customize the filter button (3) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleCustomFilterButton2\");","/src/App.vue":"\n\n\n \n
\n \n\n"},"docsPath":"guides/columns/column-filter/vue/exampleCustomFilterButton2.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton2","exampleTitle":"Customize the filter button (3)","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Customize the filter button (3) · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleCustomFilterButton2\");","/src/App.vue":"\n\n\n \n
\n \n\n"},"docsPath":"guides/columns/column-filter/vue/exampleCustomFilterButton2.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleCustomFilterButton2","exampleTitle":"Customize the filter button (3)","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleEnableFilterInColumns.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleEnableFilterInColumns.vue.json
index b56c4d784..3f622d5ab 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleEnableFilterInColumns.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleEnableFilterInColumns.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Enable filtering for individual columns · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleEnableFilterInColumns\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/columns/column-filter/vue/exampleEnableFilterInColumns.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleEnableFilterInColumns","exampleTitle":"Enable filtering for individual columns","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Enable filtering for individual columns · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleEnableFilterInColumns\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/columns/column-filter/vue/exampleEnableFilterInColumns.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleEnableFilterInColumns","exampleTitle":"Enable filtering for individual columns","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleExcludeRowsFromFiltering.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleExcludeRowsFromFiltering.vue.json
index eabf94e80..eb91c3b6a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleExcludeRowsFromFiltering.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleExcludeRowsFromFiltering.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Exclude rows from filtering · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleExcludeRowsFromFiltering\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/columns/column-filter/vue/exampleExcludeRowsFromFiltering.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Exclude rows from filtering · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleExcludeRowsFromFiltering\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/columns/column-filter/vue/exampleExcludeRowsFromFiltering.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleExcludeRowsFromFiltering","exampleTitle":"Exclude rows from filtering","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterBasicDemo.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterBasicDemo.vue.json
index e81524cd7..e424c432a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterBasicDemo.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterBasicDemo.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Filtering demo · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleFilterBasicDemo\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/columns/column-filter/vue/exampleFilterBasicDemo.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterBasicDemo","exampleTitle":"Filtering demo","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Filtering demo · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleFilterBasicDemo\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/columns/column-filter/vue/exampleFilterBasicDemo.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterBasicDemo","exampleTitle":"Filtering demo","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterDifferentTypes.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterDifferentTypes.vue.json
index 3536c608c..d8aae3671 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterDifferentTypes.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterDifferentTypes.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Filter different types of data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleFilterDifferentTypes\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/columns/column-filter/vue/exampleFilterDifferentTypes.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterDifferentTypes","exampleTitle":"Filter different types of data","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Filter different types of data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleFilterDifferentTypes\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/columns/column-filter/vue/exampleFilterDifferentTypes.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterDifferentTypes","exampleTitle":"Filter different types of data","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterOnInitialization.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterOnInitialization.vue.json
index 11d1359c7..da2756eda 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterOnInitialization.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterOnInitialization.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Filter data on initialization · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleFilterOnInitialization\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/columns/column-filter/vue/exampleFilterOnInitialization.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterOnInitialization","exampleTitle":"Filter data on initialization","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Filter data on initialization · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleFilterOnInitialization\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/columns/column-filter/vue/exampleFilterOnInitialization.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterOnInitialization","exampleTitle":"Filter data on initialization","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterThroughAPI1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterThroughAPI1.vue.json
index c1ef63753..a56ea3c1f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterThroughAPI1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleFilterThroughAPI1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Filter data programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleFilterThroughAPI1\");","/src/App.vue":"\n\n\n \n
\n
\n Show items < $200 \n Show items > $200 \n Clear filters \n
\n
\n
\n
"},"docsPath":"guides/columns/column-filter/vue/exampleFilterThroughAPI1.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterThroughAPI1","exampleTitle":"Filter data programmatically","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Filter data programmatically · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleFilterThroughAPI1\");","/src/App.vue":"\n\n\n \n
\n
\n Show items < $200 \n Show items > $200 \n Clear filters \n
\n
\n
\n
"},"docsPath":"guides/columns/column-filter/vue/exampleFilterThroughAPI1.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleFilterThroughAPI1","exampleTitle":"Filter data programmatically","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleGetFilteredData.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleGetFilteredData.vue.json
index 05717f043..8e3b5eee6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleGetFilteredData.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleGetFilteredData.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Get filtered data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleGetFilteredData\");","/src/App.vue":"\n\n\n \n
{{ rowCountInfo }}
\n
\n
"},"docsPath":"guides/columns/column-filter/vue/exampleGetFilteredData.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Get filtered data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleGetFilteredData\");","/src/App.vue":"\n\n\n \n
{{ rowCountInfo }}
\n
\n
"},"docsPath":"guides/columns/column-filter/vue/exampleGetFilteredData.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleGetFilteredData","exampleTitle":"Get filtered data","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleQuickFilter.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleQuickFilter.vue.json
index 72d303b70..70e068f68 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleQuickFilter.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleQuickFilter.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · External quick filter · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleQuickFilter\");","/src/App.vue":"\n\n\n \n
\n
\n
\n
Select a column: \n
\n {{ selectedLabel }} \n \n
\n
\n
\n
\n
\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleQuickFilter.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleQuickFilter","exampleTitle":"External quick filter","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · External quick filter · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleQuickFilter\");","/src/App.vue":"\n\n\n \n
\n
\n
\n
Select a column: \n
\n {{ selectedLabel }} \n \n
\n
\n
\n
\n
\n\n"},"docsPath":"guides/columns/column-filter/vue/exampleQuickFilter.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleQuickFilter","exampleTitle":"External quick filter","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSaveRestoreFilters.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSaveRestoreFilters.vue.json
index 220af6d9d..ea702e80b 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSaveRestoreFilters.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSaveRestoreFilters.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Save and restore filter settings · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleSaveRestoreFilters\");","/src/App.vue":"\n\n\n \n
\n
\n Filter: price > $200 \n Save filter settings \n Clear filters \n Restore filter settings \n
\n
\n
\n
"},"docsPath":"guides/columns/column-filter/vue/exampleSaveRestoreFilters.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Save and restore filter settings · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleSaveRestoreFilters\");","/src/App.vue":"\n\n\n \n
\n
\n Filter: price > $200 \n Save filter settings \n Clear filters \n Restore filter settings \n
\n
\n
\n
"},"docsPath":"guides/columns/column-filter/vue/exampleSaveRestoreFilters.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSaveRestoreFilters","exampleTitle":"Save and restore filter settings","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSearchMode.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSearchMode.vue.json
index 99791dfe0..c695e1162 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSearchMode.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleSearchMode.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleSearchMode\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/columns/column-filter/vue/exampleSearchMode.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSearchMode","exampleTitle":"Enable filtering within already filtered results","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Enable filtering within already filtered results · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleSearchMode\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/columns/column-filter/vue/exampleSearchMode.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleSearchMode","exampleTitle":"Enable filtering within already filtered results","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleServerSideFilter.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleServerSideFilter.vue.json
index cbdb20245..fc57a69bf 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleServerSideFilter.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleServerSideFilter.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Server-side filtering · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleServerSideFilter\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/columns/column-filter/vue/exampleServerSideFilter.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Server-side filtering · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleServerSideFilter\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/columns/column-filter/vue/exampleServerSideFilter.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleServerSideFilter","exampleTitle":"Server-side filtering","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleShowFilterItemsOnly.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleShowFilterItemsOnly.vue.json
index 92f58b768..9fb5c33f7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleShowFilterItemsOnly.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-filter__vue__exampleShowFilterItemsOnly.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column filter · Enable filtering · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleShowFilterItemsOnly\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/columns/column-filter/vue/exampleShowFilterItemsOnly.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleShowFilterItemsOnly","exampleTitle":"Enable filtering","docPermalink":"/column-filter","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column filter · Enable filtering · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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(\"#exampleShowFilterItemsOnly\");","/src/App.vue":"\n\n\n \n
\n "},"docsPath":"guides/columns/column-filter/vue/exampleShowFilterItemsOnly.vue","breadcrumb":["Columns","Column filter"],"guide":"guides/columns/column-filter/column-filter.md","guideTitle":"Column filter","exampleId":"exampleShowFilterItemsOnly","exampleTitle":"Enable filtering","docPermalink":"/column-filter","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example1.ts.json
index 887bdf692..940aefebd 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column freezing · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData= new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\n readonly hotSettings: GridSettings = {\n colWidths: 100,\n width: '100%',\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n fixedColumnsStart: 1,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-freezing/angular/example1.ts","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column freezing · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData= new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\n readonly hotSettings: GridSettings = {\n colWidths: 100,\n width: '100%',\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n fixedColumnsStart: 1,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-freezing/angular/example1.ts","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example2.ts.json
index f4bad643b..c82971ce5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column freezing · User-triggered freeze · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\n readonly hotSettings: GridSettings = {\n colWidths: 100,\n width: '100%',\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n fixedColumnsStart: 2,\n contextMenu: true,\n manualColumnFreeze: true,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-freezing/angular/example2.ts","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column freezing · User-triggered freeze · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\n readonly hotSettings: GridSettings = {\n colWidths: 100,\n width: '100%',\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n fixedColumnsStart: 2,\n contextMenu: true,\n manualColumnFreeze: true,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-freezing/angular/example2.ts","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.js.json
index 70faf2b9b..8aeb8f8cc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column freezing · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data,\n colWidths: 100,\n width: '100%',\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n fixedColumnsStart: 1,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-freezing/javascript/example1.js","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column freezing · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example1');\n\nnew Handsontable(container, {\n data,\n colWidths: 100,\n width: '100%',\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n fixedColumnsStart: 1,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-freezing/javascript/example1.js","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.ts.json
index 0d96d21e8..41fdceca4 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column freezing · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data,\n colWidths: 100,\n width: '100%',\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n fixedColumnsStart: 1,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-freezing/javascript/example1.ts","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column freezing · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example1')!;\n\nnew Handsontable(container, {\n data,\n colWidths: 100,\n width: '100%',\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n fixedColumnsStart: 1,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-freezing/javascript/example1.ts","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.js.json
index a430410f8..c94b8207d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column freezing · User-triggered freeze · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n data,\n colWidths: 100,\n width: '100%',\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n fixedColumnsStart: 2,\n contextMenu: true,\n manualColumnFreeze: true,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-freezing/javascript/example2.js","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column freezing · User-triggered freeze · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example2');\n\nnew Handsontable(container, {\n data,\n colWidths: 100,\n width: '100%',\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n fixedColumnsStart: 2,\n contextMenu: true,\n manualColumnFreeze: true,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-freezing/javascript/example2.js","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.ts.json
index b554db5b4..0c924bae5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column freezing · User-triggered freeze · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data,\n colWidths: 100,\n width: '100%',\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n fixedColumnsStart: 2,\n contextMenu: true,\n manualColumnFreeze: true,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-freezing/javascript/example2.ts","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column freezing · User-triggered freeze · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data,\n colWidths: 100,\n width: '100%',\n height: 320,\n rowHeaders: true,\n colHeaders: true,\n fixedColumnsStart: 2,\n contextMenu: true,\n manualColumnFreeze: true,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-freezing/javascript/example2.ts","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__react__example1.tsx.json
index c6a961241..f36a88f50 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column freezing · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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(50) // 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(50) // 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(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst ExampleComponent = () => {\n return (\n 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\n// generate an array of arrays with dummy data\nconst data = new Array(100) // number of rows\n .fill(null)\n .map((_, row) =>\n new Array(50) // number of columns\n .fill(null)\n .map((_, column) => `${row}, ${column}`)\n );\n\nconst ExampleComponent = () => {\n return (\n 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/columns/column-freezing/vue/example1.vue","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column freezing · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/columns/column-freezing/vue/example1.vue","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-freezing","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__vue__example2.vue.json
index 4b0183d41..1bb8142ba 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-freezing__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column freezing · User-triggered freeze · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/columns/column-freezing/vue/example2.vue","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column freezing · User-triggered freeze · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/columns/column-freezing/vue/example2.vue","breadcrumb":["Columns","Column freezing"],"guide":"guides/columns/column-freezing/column-freezing.md","guideTitle":"Column freezing","exampleId":"example2","exampleTitle":"User-triggered freeze","docPermalink":"/column-freezing","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example1.ts.json
index 5a63f7c8c..7ca82d405 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column groups · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n nestedHeaders: [\n ['A', { label: 'B', colspan: 8 }, 'C'],\n ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n [\n 'H',\n { label: 'I', colspan: 2 },\n { label: 'J', colspan: 2 },\n { label: 'K', colspan: 2 },\n { label: 'L', colspan: 2 },\n 'M',\n ],\n ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-groups/angular/example1.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column groups · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n nestedHeaders: [\n ['A', { label: 'B', colspan: 8 }, 'C'],\n ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n [\n 'H',\n { label: 'I', colspan: 2 },\n { label: 'J', colspan: 2 },\n { label: 'K', colspan: 2 },\n { label: 'L', colspan: 2 },\n 'M',\n ],\n ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-groups/angular/example1.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example2.ts.json
index c59491892..46d57a433 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column groups · Example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n colWidths: 60,\n height: 'auto',\n nestedHeaders: [\n ['A', { label: 'B', colspan: 8 }, 'C'],\n ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n [\n 'H',\n { label: 'I', colspan: 2 },\n { label: 'J', colspan: 2 },\n { label: 'K', colspan: 2 },\n { label: 'L', colspan: 2 },\n 'M',\n ],\n ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n ],\n collapsibleColumns: [\n { row: -4, col: 1, collapsible: true },\n { row: -3, col: 1, collapsible: true },\n { row: -2, col: 1, collapsible: true },\n { row: -2, col: 3, collapsible: true },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-groups/angular/example2.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column groups · Example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n colWidths: 60,\n height: 'auto',\n nestedHeaders: [\n ['A', { label: 'B', colspan: 8 }, 'C'],\n ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n [\n 'H',\n { label: 'I', colspan: 2 },\n { label: 'J', colspan: 2 },\n { label: 'K', colspan: 2 },\n { label: 'L', colspan: 2 },\n 'M',\n ],\n ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n ],\n collapsibleColumns: [\n { row: -4, col: 1, collapsible: true },\n { row: -3, col: 1, collapsible: true },\n { row: -2, col: 1, collapsible: true },\n { row: -2, col: 3, collapsible: true },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-groups/angular/example2.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example3.ts.json
index 1440a1a06..4adf8daa1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['North America', 4200, 3800, 4500, 12500],\n ['Europe', 3100, 2900, 3300, 9300],\n ['Asia Pacific', 2600, 2400, 2800, 7800],\n ['Latin America', 1500, 1700, 1600, 4800],\n ['Middle East', 1200, 1300, 1450, 3950],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n colWidths: 90,\n height: 'auto',\n nestedHeaders: [\n ['Region', { label: 'Q1 2025', colspan: 4 }],\n [\n 'Region',\n { label: 'Jan', visibleWhen: 'expanded' },\n { label: 'Feb', visibleWhen: 'expanded' },\n { label: 'Mar', visibleWhen: 'expanded' },\n { label: 'Total', visibleWhen: 'collapsed' },\n ],\n ],\n collapsibleColumns: true,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-groups/angular/example3.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['North America', 4200, 3800, 4500, 12500],\n ['Europe', 3100, 2900, 3300, 9300],\n ['Asia Pacific', 2600, 2400, 2800, 7800],\n ['Latin America', 1500, 1700, 1600, 4800],\n ['Middle East', 1200, 1300, 1450, 3950],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n colWidths: 90,\n height: 'auto',\n nestedHeaders: [\n ['Region', { label: 'Q1 2025', colspan: 4 }],\n [\n 'Region',\n { label: 'Jan', visibleWhen: 'expanded' },\n { label: 'Feb', visibleWhen: 'expanded' },\n { label: 'Mar', visibleWhen: 'expanded' },\n { label: 'Total', visibleWhen: 'collapsed' },\n ],\n ],\n collapsibleColumns: true,\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-groups/angular/example3.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example4.ts.json
index 16f46c60d..f16c6292e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__angular__example4.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: ['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East'],\n rowHeaderWidth: 120,\n height: 'auto',\n manualColumnMove: true,\n nestedHeaders: [\n // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n [\n { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n ],\n ['January', 'February', 'March', 'April', 'May', 'June'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-groups/angular/example4.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: ['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East'],\n rowHeaderWidth: 120,\n height: 'auto',\n manualColumnMove: true,\n nestedHeaders: [\n // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n [\n { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n ],\n ['January', 'February', 'March', 'April', 'May', 'June'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-groups/angular/example4.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.js.json
index ced81c207..4b04a1c93 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column groups · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ],\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n nestedHeaders: [\n ['A', { label: 'B', colspan: 8 }, 'C'],\n ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n [\n 'H',\n { label: 'I', colspan: 2 },\n { label: 'J', colspan: 2 },\n { label: 'K', colspan: 2 },\n { label: 'L', colspan: 2 },\n 'M',\n ],\n ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-groups/javascript/example1.js","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column groups · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ],\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n nestedHeaders: [\n ['A', { label: 'B', colspan: 8 }, 'C'],\n ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n [\n 'H',\n { label: 'I', colspan: 2 },\n { label: 'J', colspan: 2 },\n { label: 'K', colspan: 2 },\n { label: 'L', colspan: 2 },\n 'M',\n ],\n ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-groups/javascript/example1.js","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.ts.json
index 68ecd8859..ab9453ff7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column groups · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ],\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n nestedHeaders: [\n ['A', { label: 'B', colspan: 8 }, 'C'],\n ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n [\n 'H',\n { label: 'I', colspan: 2 },\n { label: 'J', colspan: 2 },\n { label: 'K', colspan: 2 },\n { label: 'L', colspan: 2 },\n 'M',\n ],\n ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-groups/javascript/example1.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column groups · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ],\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n nestedHeaders: [\n ['A', { label: 'B', colspan: 8 }, 'C'],\n ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n [\n 'H',\n { label: 'I', colspan: 2 },\n { label: 'J', colspan: 2 },\n { label: 'K', colspan: 2 },\n { label: 'L', colspan: 2 },\n 'M',\n ],\n ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-groups/javascript/example1.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.js.json
index 521a9b6b7..9e8aae511 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column groups · Example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ],\n colHeaders: true,\n rowHeaders: true,\n colWidths: 60,\n height: 'auto',\n nestedHeaders: [\n ['A', { label: 'B', colspan: 8 }, 'C'],\n ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n [\n 'H',\n { label: 'I', colspan: 2 },\n { label: 'J', colspan: 2 },\n { label: 'K', colspan: 2 },\n { label: 'L', colspan: 2 },\n 'M',\n ],\n ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n ],\n collapsibleColumns: [\n { row: -4, col: 1, collapsible: true },\n { row: -3, col: 1, collapsible: true },\n { row: -2, col: 1, collapsible: true },\n { row: -2, col: 3, collapsible: true },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-groups/javascript/example2.js","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column groups · Example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ],\n colHeaders: true,\n rowHeaders: true,\n colWidths: 60,\n height: 'auto',\n nestedHeaders: [\n ['A', { label: 'B', colspan: 8 }, 'C'],\n ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n [\n 'H',\n { label: 'I', colspan: 2 },\n { label: 'J', colspan: 2 },\n { label: 'K', colspan: 2 },\n { label: 'L', colspan: 2 },\n 'M',\n ],\n ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n ],\n collapsibleColumns: [\n { row: -4, col: 1, collapsible: true },\n { row: -3, col: 1, collapsible: true },\n { row: -2, col: 1, collapsible: true },\n { row: -2, col: 3, collapsible: true },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-groups/javascript/example2.js","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.ts.json
index bce453cf5..12677b3c6 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column groups · Example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ],\n colHeaders: true,\n rowHeaders: true,\n colWidths: 60,\n height: 'auto',\n nestedHeaders: [\n ['A', { label: 'B', colspan: 8 }, 'C'],\n ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n [\n 'H',\n { label: 'I', colspan: 2 },\n { label: 'J', colspan: 2 },\n { label: 'K', colspan: 2 },\n { label: 'L', colspan: 2 },\n 'M',\n ],\n ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n ],\n collapsibleColumns: [\n { row: -4, col: 1, collapsible: true },\n { row: -3, col: 1, collapsible: true },\n { row: -2, col: 1, collapsible: true },\n { row: -2, col: 3, collapsible: true },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-groups/javascript/example2.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column groups · Example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ],\n colHeaders: true,\n rowHeaders: true,\n colWidths: 60,\n height: 'auto',\n nestedHeaders: [\n ['A', { label: 'B', colspan: 8 }, 'C'],\n ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n [\n 'H',\n { label: 'I', colspan: 2 },\n { label: 'J', colspan: 2 },\n { label: 'K', colspan: 2 },\n { label: 'L', colspan: 2 },\n 'M',\n ],\n ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n ],\n collapsibleColumns: [\n { row: -4, col: 1, collapsible: true },\n { row: -3, col: 1, collapsible: true },\n { row: -2, col: 1, collapsible: true },\n { row: -2, col: 3, collapsible: true },\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-groups/javascript/example2.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.js.json
index 966a57967..d82709083 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 Handsontable's modules\nregisterAllModules();\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n data: [\n ['North America', 4200, 3800, 4500, 12500],\n ['Europe', 3100, 2900, 3300, 9300],\n ['Asia Pacific', 2600, 2400, 2800, 7800],\n ['Latin America', 1500, 1700, 1600, 4800],\n ['Middle East', 1200, 1300, 1450, 3950],\n ],\n colHeaders: true,\n rowHeaders: true,\n colWidths: 90,\n height: 'auto',\n nestedHeaders: [\n ['Region', { label: 'Q1 2025', colspan: 4 }],\n [\n 'Region',\n { label: 'Jan', visibleWhen: 'expanded' },\n { label: 'Feb', visibleWhen: 'expanded' },\n { label: 'Mar', visibleWhen: 'expanded' },\n { label: 'Total', visibleWhen: 'collapsed' },\n ],\n ],\n collapsibleColumns: true,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-groups/javascript/example3.js","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 Handsontable's modules\nregisterAllModules();\nconst container = document.querySelector('#example3');\nnew Handsontable(container, {\n data: [\n ['North America', 4200, 3800, 4500, 12500],\n ['Europe', 3100, 2900, 3300, 9300],\n ['Asia Pacific', 2600, 2400, 2800, 7800],\n ['Latin America', 1500, 1700, 1600, 4800],\n ['Middle East', 1200, 1300, 1450, 3950],\n ],\n colHeaders: true,\n rowHeaders: true,\n colWidths: 90,\n height: 'auto',\n nestedHeaders: [\n ['Region', { label: 'Q1 2025', colspan: 4 }],\n [\n 'Region',\n { label: 'Jan', visibleWhen: 'expanded' },\n { label: 'Feb', visibleWhen: 'expanded' },\n { label: 'Mar', visibleWhen: 'expanded' },\n { label: 'Total', visibleWhen: 'collapsed' },\n ],\n ],\n collapsibleColumns: true,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-groups/javascript/example3.js","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.ts.json
index 76bb6f060..67bfe2726 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example3.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 Handsontable's modules\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n data: [\n ['North America', 4200, 3800, 4500, 12500],\n ['Europe', 3100, 2900, 3300, 9300],\n ['Asia Pacific', 2600, 2400, 2800, 7800],\n ['Latin America', 1500, 1700, 1600, 4800],\n ['Middle East', 1200, 1300, 1450, 3950],\n ],\n colHeaders: true,\n rowHeaders: true,\n colWidths: 90,\n height: 'auto',\n nestedHeaders: [\n ['Region', { label: 'Q1 2025', colspan: 4 }],\n [\n 'Region',\n { label: 'Jan', visibleWhen: 'expanded' },\n { label: 'Feb', visibleWhen: 'expanded' },\n { label: 'Mar', visibleWhen: 'expanded' },\n { label: 'Total', visibleWhen: 'collapsed' },\n ],\n ],\n collapsibleColumns: true,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-groups/javascript/example3.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 Handsontable's modules\nregisterAllModules();\n\nconst container = document.querySelector('#example3')!;\n\nnew Handsontable(container, {\n data: [\n ['North America', 4200, 3800, 4500, 12500],\n ['Europe', 3100, 2900, 3300, 9300],\n ['Asia Pacific', 2600, 2400, 2800, 7800],\n ['Latin America', 1500, 1700, 1600, 4800],\n ['Middle East', 1200, 1300, 1450, 3950],\n ],\n colHeaders: true,\n rowHeaders: true,\n colWidths: 90,\n height: 'auto',\n nestedHeaders: [\n ['Region', { label: 'Q1 2025', colspan: 4 }],\n [\n 'Region',\n { label: 'Jan', visibleWhen: 'expanded' },\n { label: 'Feb', visibleWhen: 'expanded' },\n { label: 'Mar', visibleWhen: 'expanded' },\n { label: 'Total', visibleWhen: 'collapsed' },\n ],\n ],\n collapsibleColumns: true,\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-groups/javascript/example3.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.js.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.js.json
index b1ee8ad69..a34fd139e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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');\nnew Handsontable(container, {\n data: [\n ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n ],\n colHeaders: true,\n rowHeaders: ['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East'],\n rowHeaderWidth: 120,\n height: 'auto',\n manualColumnMove: true,\n nestedHeaders: [\n // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n [\n { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n ],\n ['January', 'February', 'March', 'April', 'May', 'June'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-groups/javascript/example4.js","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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');\nnew Handsontable(container, {\n data: [\n ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n ],\n colHeaders: true,\n rowHeaders: ['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East'],\n rowHeaderWidth: 120,\n height: 'auto',\n manualColumnMove: true,\n nestedHeaders: [\n // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n [\n { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n ],\n ['January', 'February', 'March', 'April', 'May', 'June'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/columns/column-groups/javascript/example4.js","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.ts.json
index f37e603c2..261cc0c78 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__javascript__example4.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\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 ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n ],\n colHeaders: true,\n rowHeaders: ['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East'],\n rowHeaderWidth: 120,\n height: 'auto',\n manualColumnMove: true,\n nestedHeaders: [\n // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n [\n { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n ],\n ['January', 'February', 'March', 'April', 'May', 'June'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-groups/javascript/example4.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\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 ['$4.2M', '$3.8M', '$4.5M', '$4.1M', '$4.7M', '$5.2M'],\n ['$3.1M', '$2.9M', '$3.4M', '$3.6M', '$3.8M', '$4.0M'],\n ['$5.6M', '$5.9M', '$6.3M', '$6.1M', '$6.8M', '$7.2M'],\n ['$1.4M', '$1.6M', '$1.5M', '$1.7M', '$1.9M', '$2.1M'],\n ['$2.2M', '$2.0M', '$2.4M', '$2.5M', '$2.7M', '$2.9M'],\n ],\n colHeaders: true,\n rowHeaders: ['North America', 'Europe', 'Asia Pacific', 'Latin America', 'Middle East'],\n rowHeaderWidth: 120,\n height: 'auto',\n manualColumnMove: true,\n nestedHeaders: [\n // Q1 2025 is cohesive (the default); Q2 2025 opts into splitting.\n [\n { label: 'Q1 2025 (adopt mode)', colspan: 3 },\n { label: 'Q2 2025 (split mode)', colspan: 3, columnDropMode: 'split' },\n ],\n ['January', 'February', 'March', 'April', 'May', 'June'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/columns/column-groups/javascript/example4.ts","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example1.tsx.json
index 7b229b58b..24ef517a2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Columns ▸ Column groups · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 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 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 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 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 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 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 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 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/columns/column-groups/vue/example1.vue","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column groups · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/columns/column-groups/vue/example1.vue","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-groups","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example2.vue.json
index b434f08c6..0372dc80e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column groups · Example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/columns/column-groups/vue/example2.vue","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column groups · Example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/columns/column-groups/vue/example2.vue","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example2","exampleTitle":"Example","docPermalink":"/column-groups","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example3.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example3.vue.json
index fe8437b1a..06e2c6362 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example3.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example3.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/columns/column-groups/vue/example3.vue","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column groups · Choose which columns stay visible when collapsed · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/columns/column-groups/vue/example3.vue","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example3","exampleTitle":"Choose which columns stay visible when collapsed","docPermalink":"/column-groups","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example4.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example4.vue.json
index f97398bc4..1becc23c7 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example4.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-groups__vue__example4.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/vue3\": \"0.0.0-next-53ad929-20260908\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/columns/column-groups/vue/example4.vue","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"Vue 3"}
+{"framework":"vue","displayName":"Columns ▸ Column groups · Keep a group cohesive or let it split · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/vue3\": \"0.0.0-next-5680ec8-20260909\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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/columns/column-groups/vue/example4.vue","breadcrumb":["Columns","Column groups"],"guide":"guides/columns/column-groups/column-groups.md","guideTitle":"Column groups","exampleId":"example4","exampleTitle":"Keep a group cohesive or let it split","docPermalink":"/column-groups","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example1.ts.json
index 41141dfa8..755603f37 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column headers · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n nestedHeaders: [\n ['A', { label: 'B', colspan: 8 }, 'C'],\n ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n [\n 'H',\n { label: 'I', colspan: 2 },\n { label: 'J', colspan: 2 },\n { label: 'K', colspan: 2 },\n { label: 'L', colspan: 2 },\n 'M',\n ],\n ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-header/angular/example1.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-header","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column headers · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],\n ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],\n ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: true,\n rowHeaders: true,\n height: 'auto',\n nestedHeaders: [\n ['A', { label: 'B', colspan: 8 }, 'C'],\n ['D', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 }, 'G'],\n [\n 'H',\n { label: 'I', colspan: 2 },\n { label: 'J', colspan: 2 },\n { label: 'K', colspan: 2 },\n { label: 'L', colspan: 2 },\n 'M',\n ],\n ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W'],\n ],\n autoWrapRow: true,\n autoWrapCol: true,\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-header/angular/example1.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/column-header","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example2.ts.json
index aa74e2f15..8f5dc759c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column headers · Header labels as an array · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\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 ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: [\n 'ID',\n 'Full name',\n 'Position',\n 'Country',\n 'City',\n 'Address',\n 'Zip code',\n 'Mobile',\n 'E-mail',\n ],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-header/angular/example2.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example2","exampleTitle":"Header labels as an array","docPermalink":"/column-header","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column headers · Header labels as an array · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\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 ];\n\n readonly hotSettings: GridSettings = {\n colHeaders: [\n 'ID',\n 'Full name',\n 'Position',\n 'Country',\n 'City',\n 'Address',\n 'Zip code',\n 'Mobile',\n 'E-mail',\n ],\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-header/angular/example2.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example2","exampleTitle":"Header labels as an array","docPermalink":"/column-header","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example3.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example3.ts.json
index 23db5d3b7..0913c8c87 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example3.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__columns__column-header__angular__example3.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Columns ▸ Column headers · Header labels as a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-53ad929-20260908","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-53ad929-20260908\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-53ad929-20260908\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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 standalone: true,\n imports: [HotTableModule],\n})\nexport class AppComponent {\n\n readonly hotData = [\n ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1'],\n ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2'],\n ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3'],\n ];\n\n readonly hotSettings: GridSettings = {\n colHeaders(index: number) {\n return `Col ${index + 1}`;\n },\n rowHeaders: true,\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true\n };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n {\n provide: HOT_GLOBAL_CONFIG,\n useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n },\n ],\n};"},"docsPath":"guides/columns/column-header/angular/example3.ts","breadcrumb":["Columns","Column headers"],"guide":"guides/columns/column-header/column-header.md","guideTitle":"Column headers","exampleId":"example3","exampleTitle":"Header labels as a function","docPermalink":"/column-header","lang":"Angular"}
+{"framework":"angular","displayName":"Columns ▸ Column headers · Header labels as a function · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-5680ec8-20260909","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-5680ec8-20260909\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-5680ec8-20260909\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"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