(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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 ad7d22143..77cbe1a57 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 15be9f3cc..925786d2f 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 50d137496..8478f0d07 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 58156a109..93159b7bb 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 07acc46b8..8c843d500 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 9b9fd841f..32a47a088 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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 6046360bf..9f4955c3a 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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 ff7f61300..1bc497bcf 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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 d02351c2a..b8dd99c82 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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 4efa015d0..a4e1228bd 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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 0421cf267..1b29db1e6 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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 615780c1b..466140e0c 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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 da133f6c1..56e26064a 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-1bc0b4d-20260911","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-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"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-6c0cc38-20260911","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-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"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 5ca4d19c5..0bb254e00 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-1bc0b4d-20260911","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-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"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-6c0cc38-20260911","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-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"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 328d87e2c..cd7547142 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\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 f15ae3695..455e6126d 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\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 d308c9765..944618912 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-1bc0b4d-20260911","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-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\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-6c0cc38-20260911","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-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\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 a76128e34..d5e8f2e2b 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-1bc0b4d-20260911","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-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\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-6c0cc38-20260911","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-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\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 df486fe0c..a545983aa 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-1bc0b4d-20260911","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-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","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-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 13a80b42f..3760ff8e0 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-1bc0b4d-20260911","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-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","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-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 996adf5e5..9d760301d 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\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 1ed368071..a31946f71 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\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 ac42c1ff0..ba3e6eb04 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"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 62dd80718..19ad03889 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"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 fee2ee3d6..ec34e43bb 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 0028c5962..b986a6d0d 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 1bf7ca52d..2395a99f6 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 ce23f514f..81516825a 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 0fdcb392c..0c8f17a40 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 4116005a4..a6689c883 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 1701c1765..59b9357f6 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 8a0f5272a..8d0e613a4 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 e7e61c3d3..b4de34c5e 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 561afb5db..e9792d990 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 063813436..ca711db74 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 95b8fe083..931487898 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 9b88457df..d4e64a1d2 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 7d0c92880..b8ece22eb 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.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 ee3fef931..d56a59f6a 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(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 847b3bf5b..beb96ce5a 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(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 152c351cb..361146af2 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 e4e20b464..99badd1da 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 47bb5e23e..555cb01d4 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-1bc0b4d-20260911","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-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","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-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 e49d8f74c..a70c8d6b5 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-1bc0b4d-20260911","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-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","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-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 2fcd3b263..174fb816a 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 e7ab31759..abd2dcc80 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 302e54d89..c18a0cf92 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\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-6c0cc38-20260911","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-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 2bf4b2e58..d3bc8f0cc 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-1bc0b4d-20260911","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-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","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-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 887191e19..1bdd4156a 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-1bc0b4d-20260911","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-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 18f904c0a..01b0e1ec4 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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 f466b47d9..8accef25c 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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 c4baaf7d2..a61dde6c5 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\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 53c2ac06e..dcfbbed06 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\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 8ba2709f6..65390deac 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\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 02a6b6a73..e69b24494 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => 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 06a9021b9..70654682f 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 851a5a5f9..e87214883 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 4a79e01dd..00fb680ac 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 2a667ea22..2d0e8bef5 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 dc4b4e3e7..335a239c1 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","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-6c0cc38-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 a4271ae44..ddd778c19 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 af58ef3e9..36ee264a7 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 08ef05d30..c5dd7859f 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 99847d42b..b1a06f0f5 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 83d29e345..cf5c48b2a 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 33be393ea..01147557c 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 177acf08b..75869e93a 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 a78a81abe..0cb09adcf 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\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 629239e8b..e412c2f98 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.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 671f997a9..5e5e2030c 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.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 3c7d1eeec..bebe7b17b 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 d5760d259..185a53019 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 e52d3fedf..50f5e9a77 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 f625d46a0..e99c35885 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 783f4541d..6ff903ea2 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 02718bcf0..8f2547ff2 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 f18d540ce..fba98adce 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 291625922..d30f26ab1 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 928e814df..7d5b2e998 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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 008555b0f..47d66047e 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 bcebbd549..73e39a808 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 8cc02bb8e..fc03767c3 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 cd3caf53f..1ddcacaa4 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 67bc582c3..1192fabd2 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 6d6482037..c8c731641 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 5bfc37ff8..e8fe6e648 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 34f93880d..b798ecc92 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 aaead4cfe..d2f77b6bf 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 d0b89f793..3fd96bacd 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 0d456e5e6..77cca94e6 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 7ecb93398..ac461a51a 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 5a378888f..d050b06b1 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 99580b208..38bc676b2 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 4ca957cd7..56ad3e7c5 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 f137de195..fc8579587 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 0c47aa5fb..223562b31 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 2722f2a3b..b302f8ff5 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 e4487888c..0a3e6d567 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 7d3c129af..5ce24445a 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 04e3f3e81..55f4d6699 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 03f223eb0..06c7a5562 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 f9c2a79f1..b262f9735 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 47d748b04..d340b715c 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 0b8399b99..35dd54c90 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 81b848746..c312e09fb 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 f0125f09e..5057c599f 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 103fd6c0d..b78bb8198 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 9bbe790b2..3f7602e18 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 76672364c..fcb708042 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 d3e31031f..2c59e4c5b 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 cc1875b12..c724afa2f 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 0468b554d..f51fea5a5 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 be1f7d258..502d88f93 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(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 496eed9a9..1fe267a29 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 b24b6d7b4..daed105cf 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 697a110d3..7af2c4e11 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 7b3a04754..e661cf583 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 a5fd08710..af73ebefc 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 e1c152e43..0c73e914e 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 4589257d8..757c8d5e0 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 af6a901eb..e949e66ab 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 18312c588..4a6590036 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 6ffe10bd4..e11aad97b 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 14bee1549..8909896bc 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 a1051c9f5..18387baaa 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 1db1af53c..08030c91d 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 bb10efefc..28b98a952 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 7978850ad..cffdf48c6 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 a6ebb1c2f..32774ed07 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 3e6aa0252..afbdfa5af 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 6360ac163..34c81bab9 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 c0938afdd..9f50fcaf3 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 196940758..b7978e20a 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 6f3716de9..140d9a3f9 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 e0bec8725..b50a62bf3 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 6ed210611..f5ef9c9c3 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 917af1c69..91c0e0c1c 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 1623eed49..c18e8f5ff 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 72b49beee..e1ad7c0fe 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 48333c93b..5ccf1f977 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 00e44b452..446c4e2e4 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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 44d96ced4..0a06e73bb 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"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 7821bde71..a3d6ef32e 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"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 1fb2111f8..b09ee2143 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 31048d6c2..65da258bf 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 7ba55bf1f..1f402e52b 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 d5b955987..3df0d165b 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 fa9004b27..f3bb21703 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 66283f64d..60f8b67cb 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 0517236eb..4f9aab128 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 8d4e19b7f..dce414b8b 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 749652eb3..cd8cfb32b 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 97559be43..d073179fb 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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 bf60f2070..7ee3004c4 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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 265d67466..9f12d7da5 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 fb3291e18..91d3127ae 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 1d6b64ace..86690dbb8 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 4070d0c62..78364c456 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 0c490ee1f..fdd8ef402 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 59a876cdc..6737b085b 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 6766f8de2..0db35782c 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 f26c78d84..d49c7c397 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 481db9c25..a1e8a022b 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 4682a6d9d..83d6d79e0 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 11621ae14..5887582b3 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 0e36fbf20..8c15e5c82 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 3b408dbd2..028c5723c 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 a2f330214..380c0ca7e 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 742448b66..3b68fc908 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 b52555211..ff4411bf8 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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 acfb72d5e..0a94c4940 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 4b277743e..c3d6112fd 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 93fb53e19..d0cd26baf 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 0dde0866e..3e1758a67 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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 ba1ddf71f..ce59d2148 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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 cfdb5044f..5a48b8b51 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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 d3f5e5d7a..8ec3c6909 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 700fad34e..86bcbdd65 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 84d179e74..f328321f3 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 64c87b345..1d0369c5a 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 a7aebc13c..1c32cc02c 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 8d610d097..1c25be043 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 6bc23d3b3..73beda71e 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 791ecadcc..33119c344 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 fa9ad4450..2466d7f60 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 c0b2a4c01..756e67828 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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 5af6377b7..c17f558f5 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"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 5e99bd021..f32c5da12 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"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 baa98b61c..dad264a59 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 4197e49f3..8059e1e05 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 89b661d59..0dbb8d854 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 1635e2987..7475d4fe6 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 e3c1c6093..04689781b 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 9be49ddd5..35ba6d929 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 4306e3d52..4293d0cda 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 7a24b93f9..85713bcd7 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 1a10c4939..d0d92d708 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 de867b4c7..1f909d099 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 f0ef1d2db..601a85882 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 52ebc5b27..b1968867f 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 bd880f920..e569c5a92 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 80217db5b..ae0114f32 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 e5ac6d0de..4c998643b 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 e88be091c..24c881f0c 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 a873d1fd5..fed2347ba 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 bfb60aff7..d88f7328c 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 24963dccc..34d716464 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 a8d68d9ee..6593ba615 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 70e740520..b3619a3f2 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 55c651245..342cbd9cc 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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 a3a7dfafd..6d2697b74 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, 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 5181b9942..08a026e8c 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 d2515a20c..098348b36 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 6d764d96a..fdd48d663 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 3b31af4be..653e2e049 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 666af09ed..75a42b7a8 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 4567c7039..7e7e213fb 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 5b81f087a..b78c93ed8 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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 016b23218..6ce062bc9 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"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 e9eeab680..297a777e5 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"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 8859d27ba..c4a985aa8 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 dc499e60d..0fb976f7a 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\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 5193ffce7..e7a57183d 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\n \"strictInjectionParameters\": true,\n \"strictInputAccessModifiers\": true,\n \"strictTemplates\": true\n }\n}","/src/index.html":"\n\n\n Handsontable Angular Example \n \n
\n\n","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\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 502831317..f64e933f2 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\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 671ef3549..7cedbbf8d 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 1943d0af5..09ec6fb89 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 b08187857..79ff0effa 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 fb72992d7..1a8e2c7b1 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 dfb7de3bc..f12cca2b4 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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 769336574..5b1ec0273 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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 02fee5553..14353388a 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": 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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": 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 6979436c8..4c628f9a7 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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 7421dc573..19d07ab1e 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": 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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": 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 86b115b67..9f7e3d37e 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\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 67e6c5c66..1cfb4af6d 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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 c54fb4949..11d8bd5a9 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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 9f145a3a1..92e47523d 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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 f27d83f75..5b0c45587 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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 fada5b612..cd12399d0 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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 30c7faa4f..881dfc0b7 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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 4bbe3ee13..260f23db4 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-1bc0b4d-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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-6c0cc38-20260911","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-angular-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"build\": \"ng build\"\n },\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/angular-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"@angular/animations\": \"22.0.6\",\n \"@angular/common\": \"22.0.6\",\n \"@angular/compiler\": \"22.0.6\",\n \"@angular/core\": \"22.0.6\",\n \"@angular/forms\": \"22.0.6\",\n \"@angular/platform-browser\": \"22.0.6\",\n \"@angular/platform-browser-dynamic\": \"22.0.6\",\n \"@angular/router\": \"22.0.6\",\n \"rxjs\": \"~7.8.2\",\n \"tslib\": \"^2.8.1\",\n \"zone.js\": \"~0.16.2\",\n \"@angular-devkit/build-angular\": \"22.0.6\",\n \"@angular/cli\": \"22.0.6\",\n \"@angular/compiler-cli\": \"22.0.6\",\n \"typescript\": \"~6.0.3\"\n },\n \"devDependencies\": {}\n}","/angular.json":"{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \"projects\": {\n \"app\": {\n \"projectType\": \"application\",\n \"root\": \"\",\n \"sourceRoot\": \"src\",\n \"prefix\": \"app\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:application\",\n \"options\": {\n \"outputPath\": \"dist/app\",\n \"index\": \"src/index.html\",\n \"browser\": \"src/main.ts\",\n \"polyfills\": [\n \"zone.js\"\n ],\n \"tsConfig\": \"tsconfig.json\",\n \"assets\": [],\n \"styles\": [],\n \"scripts\": []\n },\n \"configurations\": {\n \"development\": {\n \"optimization\": false,\n \"sourceMap\": true\n }\n },\n \"defaultConfiguration\": \"development\"\n },\n \"serve\": {\n \"builder\": \"@angular-devkit/build-angular:dev-server\",\n \"configurations\": {\n \"development\": {\n \"buildTarget\": \"app:build:development\"\n }\n },\n \"defaultConfiguration\": \"development\"\n }\n }\n }\n }\n}","/tsconfig.json":"{\n \"compilerOptions\": {\n \"outDir\": \"./dist/out-tsc\",\n \"strict\": true,\n \"noImplicitOverride\": true,\n \"noPropertyAccessFromIndexSignature\": true,\n \"noImplicitReturns\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"sourceMap\": true,\n \"declaration\": false,\n \"experimentalDecorators\": true,\n \"moduleResolution\": \"bundler\",\n \"importHelpers\": true,\n \"target\": \"ES2022\",\n \"module\": \"ES2022\",\n \"useDefineForClassFields\": false,\n \"lib\": [\n \"ES2022\",\n \"dom\"\n ]\n },\n \"angularCompilerOptions\": {\n \"enableI18nLegacyMessageIdFormat\": false,\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 60805533f..b88a16ace 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-1bc0b4d-20260911","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-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","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-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 71a2226b8..75a1c85f4 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-1bc0b4d-20260911","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-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","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-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 2255ee274..9d51d409f 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-1bc0b4d-20260911","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-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","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-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 2d0d18949..2747f77e5 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-1bc0b4d-20260911","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-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","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-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 be47565b8..f2162e69b 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 d543f32e4..e1a5754f5 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 3f2e96252..f7badd375 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 7362df245..af55f730e 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 45cd99e0e..d01d7f430 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 9fadd96a3..818208b90 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"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 537d575e9..46d8350cd 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 5516ae0ee..873ce63ec 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 eca62c6c7..43fdcc747 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 7fe046ba9..dfd8d94f4 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 2dcdaaf66..8da43cb73 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\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 c31ba3926..7cdfdaf61 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\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 5ed0a2009..b9b9fc9c2 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"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 6d16d3e6c..d791eba24 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"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 b31672b2b..d1f39161e 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-1bc0b4d-20260911","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-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"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-6c0cc38-20260911","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-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"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 c1fe52549..9adfc3e5f 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-1bc0b4d-20260911","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-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"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-6c0cc38-20260911","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-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"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 de9bb0830..f75f035a2 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\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 fdc40e5df..5f6689da8 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\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 d9ec7cb6b..8363864db 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 b32ffcee1..f20717cb4 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 c38346db0..2c085a80f 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 4971d6f11..89ade0b73 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 08fb25265..c65f4d8d1 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\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 5f49f9091..c2138f53f 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-1bc0b4d-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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-6c0cc38-20260911","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"vite\": \"^5.4.0\",\n \"typescript\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/index.html":"\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 79d36a7f3..747836f70 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-1bc0b4d-20260911","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-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-6c0cc38-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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 a6fb48025..df5f72a6e 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/react-wrapper\": \"0.0.0-next-1bc0b4d-20260911\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 32a1b25b8..98ef2fb4a 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 377f7f15d..8a3f40259 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 71839feda..19db9fc46 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 7c283365d..3a642e9ce 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 ba6976fab..44abad462 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 974eb27ec..f6a92ee42 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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-6c0cc38-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-6c0cc38-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-6c0cc38-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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 56bbe41d4..741d2d30a 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-1bc0b4d-20260911","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-vue-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-1bc0b4d-20260911\",\n \"@handsontable/vue3\": \"0.0.0-next-1bc0b4d-20260911\",\n \"vue\": \"3.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-vue\": \"^5.0.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"\n\n\n 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