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

---
 ...ies-and-menus__use-icons-in-cells__angular__example2.ts.json | 2 +-
 ...-and-menus__use-icons-in-cells__javascript__example2.js.json | 2 +-
 ...-and-menus__use-icons-in-cells__javascript__example2.ts.json | 2 +-
 ...ries-and-menus__use-icons-in-cells__react__example2.tsx.json | 2 +-
 ...sories-and-menus__use-icons-in-cells__vue__example2.vue.json | 2 +-
 ..._getting-started__binding-to-data__angular__example1.ts.json | 2 +-
 ...getting-started__binding-to-data__angular__example10.ts.json | 2 +-
 ...getting-started__binding-to-data__angular__example11.ts.json | 2 +-
 ..._getting-started__binding-to-data__angular__example2.ts.json | 2 +-
 ...tting-started__binding-to-data__javascript__example1.js.json | 2 +-
 ...tting-started__binding-to-data__javascript__example1.ts.json | 2 +-
 ...ting-started__binding-to-data__javascript__example10.js.json | 2 +-
 ...ting-started__binding-to-data__javascript__example10.ts.json | 2 +-
 ...ting-started__binding-to-data__javascript__example11.js.json | 2 +-
 ...ting-started__binding-to-data__javascript__example11.ts.json | 2 +-
 ...tting-started__binding-to-data__javascript__example2.js.json | 2 +-
 ...tting-started__binding-to-data__javascript__example2.ts.json | 2 +-
 ...__getting-started__binding-to-data__react__example1.tsx.json | 2 +-
 ..._getting-started__binding-to-data__react__example10.tsx.json | 2 +-
 ..._getting-started__binding-to-data__react__example11.tsx.json | 2 +-
 ...__getting-started__binding-to-data__react__example2.tsx.json | 2 +-
 ...es__getting-started__binding-to-data__vue__example1.vue.json | 2 +-
 ...s__getting-started__binding-to-data__vue__example10.vue.json | 2 +-
 ...s__getting-started__binding-to-data__vue__example11.vue.json | 2 +-
 ...es__getting-started__binding-to-data__vue__example2.vue.json | 2 +-
 ...getting-started__events-and-hooks__angular__example2.ts.json | 2 +-
 ...ting-started__events-and-hooks__javascript__example1.js.json | 2 +-
 ...ting-started__events-and-hooks__javascript__example2.js.json | 2 +-
 ...ting-started__events-and-hooks__javascript__example2.ts.json | 2 +-
 ..._getting-started__events-and-hooks__react__example2.tsx.json | 2 +-
 ...s__getting-started__events-and-hooks__vue__example2.vue.json | 2 +-
 ...es__getting-started__installation__angular__example1.ts.json | 2 +-
 ..._getting-started__installation__javascript__example1.js.json | 2 +-
 ..._getting-started__installation__javascript__example1.ts.json | 2 +-
 ...des__getting-started__installation__react__example1.tsx.json | 2 +-
 ...uides__getting-started__installation__vue__example1.vue.json | 2 +-
 36 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__angular__example2.ts.json
index 170e5a046..060d391f2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"@lucide/angular\": \"1.50.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { GridSettings, HotCellRendererComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport { LucideFlag, LucideFlagOff } from '@lucide/angular';\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\n// A renderer component receives the cell's value and coordinates, so the\n// Lucide icon goes in the template. No `data-lucide` placeholder and no\n// `createIcons()` scan - Angular renders the `<svg>` itself.\n@Component({\n  selector: 'app-flag-renderer',\n  standalone: true,\n  imports: [LucideFlag, LucideFlagOff],\n  // Each icon is its own standalone component, applied as an attribute on an\n  // `<svg>` element. The icon has no accessible name, so the button carries an\n  // `aria-label` that describes what clicking it does. `currentColor` is\n  // Lucide's default stroke, so the icon stays visible in both themes.\n  template: `\n    <button\n      type=\"button\"\n      [attr.aria-label]=\"label\"\n      style=\"background: none; border: none; cursor: pointer; padding: 0.25rem;\"\n      (click)=\"toggle()\"\n    >\n      @if (value) {\n        <svg lucideFlag size=\"18\"></svg>\n      } @else {\n        <svg lucideFlagOff size=\"18\"></svg>\n      }\n    </button>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FlagRendererComponent extends HotCellRendererComponent<boolean> {\n  get label(): string {\n    const taskName = String(this.instance.getDataAtCell(this.row, 0));\n\n    return this.value\n      ? `Remove the follow-up flag from ${taskName}`\n      : `Flag ${taskName} for follow-up`;\n  }\n\n  toggle(): void {\n    this.instance.setDataAtCell(this.row, 3, !this.value);\n  }\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example2',\n  template: `\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly data: Task[] = [\n    { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n    { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n    { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n    { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n    { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n    columns: [\n      { data: 'task' },\n      { data: 'assignee' },\n      { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n      { data: 'flagged', renderer: FlagRendererComponent, className: 'htCenter' },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/angular/example2.ts","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"Angular"}
+{"framework":"angular","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\",\n    \"@lucide/angular\": \"1.52.0\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n      <app-example2></app-example2>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { GridSettings, HotCellRendererComponent, HotTableModule } from '@handsontable/angular-wrapper';\nimport { LucideFlag, LucideFlagOff } from '@lucide/angular';\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\n// A renderer component receives the cell's value and coordinates, so the\n// Lucide icon goes in the template. No `data-lucide` placeholder and no\n// `createIcons()` scan - Angular renders the `<svg>` itself.\n@Component({\n  selector: 'app-flag-renderer',\n  standalone: true,\n  imports: [LucideFlag, LucideFlagOff],\n  // Each icon is its own standalone component, applied as an attribute on an\n  // `<svg>` element. The icon has no accessible name, so the button carries an\n  // `aria-label` that describes what clicking it does. `currentColor` is\n  // Lucide's default stroke, so the icon stays visible in both themes.\n  template: `\n    <button\n      type=\"button\"\n      [attr.aria-label]=\"label\"\n      style=\"background: none; border: none; cursor: pointer; padding: 0.25rem;\"\n      (click)=\"toggle()\"\n    >\n      @if (value) {\n        <svg lucideFlag size=\"18\"></svg>\n      } @else {\n        <svg lucideFlagOff size=\"18\"></svg>\n      }\n    </button>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FlagRendererComponent extends HotCellRendererComponent<boolean> {\n  get label(): string {\n    const taskName = String(this.instance.getDataAtCell(this.row, 0));\n\n    return this.value\n      ? `Remove the follow-up flag from ${taskName}`\n      : `Flag ${taskName} for follow-up`;\n  }\n\n  toggle(): void {\n    this.instance.setDataAtCell(this.row, 3, !this.value);\n  }\n}\n\n@Component({\n  standalone: true,\n  imports: [HotTableModule],\n  selector: 'app-example2',\n  template: `\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  `,\n})\nexport class AppComponent {\n  readonly data: Task[] = [\n    { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n    { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n    { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n    { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n    { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n    columns: [\n      { data: 'task' },\n      { data: 'assignee' },\n      { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n      { data: 'flagged', renderer: FlagRendererComponent, className: 'htCenter' },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/angular/example2.ts","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example2.js.json
index 413e2a304..619d47f9a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"lucide\": \"1.50.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { createIcons, Flag, FlagOff } from 'lucide';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst data = [\n    { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n    { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n    { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n    { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n    { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n// Lucide reads a `data-lucide` placeholder and replaces it with an inline\n// `<svg>`. The renderer writes the placeholder, then triggers the swap.\nconst flagRenderer = (instance, td, row, _col, _prop, value) => {\n    const taskName = String(instance.getDataAtCell(row, 0));\n    const button = document.createElement('button');\n    button.type = 'button';\n    button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n    button.innerHTML = `<i data-lucide=\"${value ? 'flag' : 'flag-off'}\"></i>`;\n    // The icon has no accessible name, so the button carries an `aria-label`\n    // that describes what clicking it does.\n    button.setAttribute('aria-label', value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`);\n    button.addEventListener('click', () => {\n        instance.setDataAtCell(row, 3, !value);\n    });\n    td.innerText = '';\n    td.appendChild(button);\n    // `root` scopes the scan to this cell. Without it, Lucide walks the whole\n    // document on every cell render, which a grid does once per visible cell.\n    // `currentColor` keeps the icon visible in both light and dark themes.\n    createIcons({\n        icons: { Flag, FlagOff },\n        attrs: { width: '18', height: '18', stroke: 'currentColor' },\n        root: td,\n    });\n    return td;\n};\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    data,\n    colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n    columns: [\n        { data: 'task' },\n        { data: 'assignee' },\n        { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n        { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/javascript/example2.js","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"lucide\": \"1.52.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport { createIcons, Flag, FlagOff } from 'lucide';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst data = [\n    { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n    { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n    { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n    { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n    { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n// Lucide reads a `data-lucide` placeholder and replaces it with an inline\n// `<svg>`. The renderer writes the placeholder, then triggers the swap.\nconst flagRenderer = (instance, td, row, _col, _prop, value) => {\n    const taskName = String(instance.getDataAtCell(row, 0));\n    const button = document.createElement('button');\n    button.type = 'button';\n    button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n    button.innerHTML = `<i data-lucide=\"${value ? 'flag' : 'flag-off'}\"></i>`;\n    // The icon has no accessible name, so the button carries an `aria-label`\n    // that describes what clicking it does.\n    button.setAttribute('aria-label', value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`);\n    button.addEventListener('click', () => {\n        instance.setDataAtCell(row, 3, !value);\n    });\n    td.innerText = '';\n    td.appendChild(button);\n    // `root` scopes the scan to this cell. Without it, Lucide walks the whole\n    // document on every cell render, which a grid does once per visible cell.\n    // `currentColor` keeps the icon visible in both light and dark themes.\n    createIcons({\n        icons: { Flag, FlagOff },\n        attrs: { width: '18', height: '18', stroke: 'currentColor' },\n        root: td,\n    });\n    return td;\n};\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n    data,\n    colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n    columns: [\n        { data: 'task' },\n        { data: 'assignee' },\n        { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n        { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n    ],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n    licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/javascript/example2.js","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example2.ts.json
index 65e832aa3..1225d10be 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"lucide\": \"1.50.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport { createIcons, Flag, FlagOff } from 'lucide';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\nconst data: Task[] = [\n  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n\n// Lucide reads a `data-lucide` placeholder and replaces it with an inline\n// `<svg>`. The renderer writes the placeholder, then triggers the swap.\nconst flagRenderer: BaseRenderer = (instance, td, row, _col, _prop, value) => {\n  const taskName = String(instance.getDataAtCell(row, 0));\n  const button = document.createElement('button');\n\n  button.type = 'button';\n  button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n  button.innerHTML = `<i data-lucide=\"${value ? 'flag' : 'flag-off'}\"></i>`;\n  // The icon has no accessible name, so the button carries an `aria-label`\n  // that describes what clicking it does.\n  button.setAttribute(\n    'aria-label',\n    value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`\n  );\n  button.addEventListener('click', () => {\n    instance.setDataAtCell(row, 3, !value);\n  });\n\n  td.innerText = '';\n  td.appendChild(button);\n\n  // `root` scopes the scan to this cell. Without it, Lucide walks the whole\n  // document on every cell render, which a grid does once per visible cell.\n  // `currentColor` keeps the icon visible in both light and dark themes.\n  createIcons({\n    icons: { Flag, FlagOff },\n    attrs: { width: '18', height: '18', stroke: 'currentColor' },\n    root: td,\n  });\n\n  return td;\n};\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n  columns: [\n    { data: 'task' },\n    { data: 'assignee' },\n    { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n    { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/javascript/example2.ts","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\",\n    \"lucide\": \"1.52.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport { createIcons, Flag, FlagOff } from 'lucide';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\nconst data: Task[] = [\n  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n\n// Lucide reads a `data-lucide` placeholder and replaces it with an inline\n// `<svg>`. The renderer writes the placeholder, then triggers the swap.\nconst flagRenderer: BaseRenderer = (instance, td, row, _col, _prop, value) => {\n  const taskName = String(instance.getDataAtCell(row, 0));\n  const button = document.createElement('button');\n\n  button.type = 'button';\n  button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n  button.innerHTML = `<i data-lucide=\"${value ? 'flag' : 'flag-off'}\"></i>`;\n  // The icon has no accessible name, so the button carries an `aria-label`\n  // that describes what clicking it does.\n  button.setAttribute(\n    'aria-label',\n    value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`\n  );\n  button.addEventListener('click', () => {\n    instance.setDataAtCell(row, 3, !value);\n  });\n\n  td.innerText = '';\n  td.appendChild(button);\n\n  // `root` scopes the scan to this cell. Without it, Lucide walks the whole\n  // document on every cell render, which a grid does once per visible cell.\n  // `currentColor` keeps the icon visible in both light and dark themes.\n  createIcons({\n    icons: { Flag, FlagOff },\n    attrs: { width: '18', height: '18', stroke: 'currentColor' },\n    root: td,\n  });\n\n  return td;\n};\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n  columns: [\n    { data: 'task' },\n    { data: 'assignee' },\n    { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n    { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/javascript/example2.ts","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__react__example2.tsx.json
index 92910ef2f..973c2e107 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"lucide-react\": \"1.50.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn, HotRendererProps } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Flag, FlagOff } from 'lucide-react';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\nconst data: Task[] = [\n  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n\n// A renderer component receives the cell's value and coordinates, so the\n// Lucide icon goes in as JSX. No `data-lucide` placeholder and no\n// `createIcons()` scan - React renders the `<svg>` itself.\n//\n// Pass a renderer component through `<HotColumn renderer={...}>`, not through\n// a `renderer` key in the `columns` array. Only the prop is wrapped for React;\n// a component in `columns` reaches the grid as a plain renderer function and\n// is called with `(instance, TD, row, ...)` instead of a props object.\nconst FlagCell = ({ instance, row, value }: HotRendererProps) => {\n  const taskName = String(instance.getDataAtCell(row, 0));\n  const flagged = Boolean(value);\n  // The icon has no accessible name, so the button carries an `aria-label`\n  // that describes what clicking it does.\n  const label = flagged\n    ? `Remove the follow-up flag from ${taskName}`\n    : `Flag ${taskName} for follow-up`;\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '0.25rem' }}\n      onClick={() => instance.setDataAtCell(row, 3, !flagged)}\n    >\n      {/* `currentColor` is Lucide's default stroke, so the icon stays visible\n          in both light and dark themes. */}\n      {flagged ? <Flag size={18} /> : <FlagOff size={18} />}\n    </button>\n  );\n};\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Task', 'Assignee', 'Due date', 'Flagged']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"task\" />\n      <HotColumn data=\"assignee\" />\n      <HotColumn\n        data=\"dueDate\"\n        type=\"date\"\n        dateFormat={{ year: 'numeric', month: '2-digit', day: '2-digit' }}\n      />\n      <HotColumn data=\"flagged\" className=\"htCenter\" renderer={FlagCell} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/react/example2.tsx","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"React (TS)"}
+{"framework":"react","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\",\n    \"lucide-react\": \"1.52.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn, HotRendererProps } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { Flag, FlagOff } from 'lucide-react';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\nconst data: Task[] = [\n  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n\n// A renderer component receives the cell's value and coordinates, so the\n// Lucide icon goes in as JSX. No `data-lucide` placeholder and no\n// `createIcons()` scan - React renders the `<svg>` itself.\n//\n// Pass a renderer component through `<HotColumn renderer={...}>`, not through\n// a `renderer` key in the `columns` array. Only the prop is wrapped for React;\n// a component in `columns` reaches the grid as a plain renderer function and\n// is called with `(instance, TD, row, ...)` instead of a props object.\nconst FlagCell = ({ instance, row, value }: HotRendererProps) => {\n  const taskName = String(instance.getDataAtCell(row, 0));\n  const flagged = Boolean(value);\n  // The icon has no accessible name, so the button carries an `aria-label`\n  // that describes what clicking it does.\n  const label = flagged\n    ? `Remove the follow-up flag from ${taskName}`\n    : `Flag ${taskName} for follow-up`;\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '0.25rem' }}\n      onClick={() => instance.setDataAtCell(row, 3, !flagged)}\n    >\n      {/* `currentColor` is Lucide's default stroke, so the icon stays visible\n          in both light and dark themes. */}\n      {flagged ? <Flag size={18} /> : <FlagOff size={18} />}\n    </button>\n  );\n};\n\nconst ExampleComponent = () => {\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['Task', 'Assignee', 'Due date', 'Flagged']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    >\n      <HotColumn data=\"task\" />\n      <HotColumn data=\"assignee\" />\n      <HotColumn\n        data=\"dueDate\"\n        type=\"date\"\n        dateFormat={{ year: 'numeric', month: '2-digit', day: '2-digit' }}\n      />\n      <HotColumn data=\"flagged\" className=\"htCenter\" renderer={FlagCell} />\n    </HotTable>\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/react/example2.tsx","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__vue__example2.vue.json
index bf0dd3ba1..e37e27c4e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__accessories-and-menus__use-icons-in-cells__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"lucide\": \"1.50.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport { createIcons, Flag, FlagOff } from 'lucide';\n\nregisterAllModules();\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\nconst data: Task[] = [\n  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n\n// The Vue wrapper renders cells through a renderer function rather than a\n// component, so this uses the same `data-lucide` placeholder as vanilla\n// JavaScript: write the placeholder, then let Lucide swap it for an `<svg>`.\nconst flagRenderer: BaseRenderer = (instance, td, row, _col, _prop, value) => {\n  const taskName = String(instance.getDataAtCell(row, 0));\n  const button = document.createElement('button');\n\n  button.type = 'button';\n  button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n  button.innerHTML = `<i data-lucide=\"${value ? 'flag' : 'flag-off'}\"></i>`;\n  // The icon has no accessible name, so the button carries an `aria-label`\n  // that describes what clicking it does.\n  button.setAttribute(\n    'aria-label',\n    value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`\n  );\n  button.addEventListener('click', () => {\n    instance.setDataAtCell(row, 3, !value);\n  });\n\n  td.innerText = '';\n  td.appendChild(button);\n\n  // `root` scopes the scan to this cell. Without it, Lucide walks the whole\n  // document on every cell render, which a grid does once per visible cell.\n  // `currentColor` keeps the icon visible in both light and dark themes.\n  createIcons({\n    icons: { Flag, FlagOff },\n    attrs: { width: '18', height: '18', stroke: 'currentColor' },\n    root: td,\n  });\n\n  return td;\n};\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n  columns: [\n    { data: 'task' },\n    { data: 'assignee' },\n    { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n    { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/vue/example2.vue","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"Vue 3"}
+{"framework":"vue","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\",\n    \"lucide\": \"1.52.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport { createIcons, Flag, FlagOff } from 'lucide';\n\nregisterAllModules();\n\ninterface Task {\n  task: string;\n  assignee: string;\n  dueDate: string;\n  flagged: boolean;\n}\n\nconst data: Task[] = [\n  { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n  { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n  { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n  { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n  { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n\n// The Vue wrapper renders cells through a renderer function rather than a\n// component, so this uses the same `data-lucide` placeholder as vanilla\n// JavaScript: write the placeholder, then let Lucide swap it for an `<svg>`.\nconst flagRenderer: BaseRenderer = (instance, td, row, _col, _prop, value) => {\n  const taskName = String(instance.getDataAtCell(row, 0));\n  const button = document.createElement('button');\n\n  button.type = 'button';\n  button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n  button.innerHTML = `<i data-lucide=\"${value ? 'flag' : 'flag-off'}\"></i>`;\n  // The icon has no accessible name, so the button carries an `aria-label`\n  // that describes what clicking it does.\n  button.setAttribute(\n    'aria-label',\n    value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`\n  );\n  button.addEventListener('click', () => {\n    instance.setDataAtCell(row, 3, !value);\n  });\n\n  td.innerText = '';\n  td.appendChild(button);\n\n  // `root` scopes the scan to this cell. Without it, Lucide walks the whole\n  // document on every cell render, which a grid does once per visible cell.\n  // `currentColor` keeps the icon visible in both light and dark themes.\n  createIcons({\n    icons: { Flag, FlagOff },\n    attrs: { width: '18', height: '18', stroke: 'currentColor' },\n    root: td,\n  });\n\n  return td;\n};\n\nconst hotSettings = ref<GridSettings>({\n  data,\n  colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n  columns: [\n    { data: 'task' },\n    { data: 'assignee' },\n    { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n    { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/vue/example2.vue","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example1.ts.json
index 6e5c9f3c0..2beed8611 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-binding-data></example1-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Array<Array<string | number>> = [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n    ['2017', 10, 11, 12, 13, 15, 16],\n    ['2018', 10, 11, 12, 13, 15, 16],\n    ['2019', 10, 11, 12, 13, 15, 16],\n    ['2020', 10, 11, 12, 13, 15, 16],\n    ['2021', 10, 11, 12, 13, 15, 16],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    startRows: 5,\n    startCols: 5,\n    colHeaders: true,\n    height: 'auto',\n    width: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example1.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/binding-to-data","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example1-binding-data></example1-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example1-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: string[][] = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    startRows: 5,\n    startCols: 5,\n    colHeaders: ['SKU', 'Product', 'Supplier', 'Category', 'Warehouse'],\n    height: 'auto',\n    width: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example1.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/binding-to-data","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example10.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example10.ts.json
index 1fe4d642b..3005a3875 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example10.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example10.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Understand binding as a reference · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example10-binding-data></example10-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example10-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data: Array<Array<string | number>> = [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n    ['2017', 10, 11, 12, 13, 15, 16],\n    ['2018', 10, 11, 12, 13, 15, 16],\n    ['2019', 10, 11, 12, 13, 15, 16],\n    ['2020', 10, 11, 12, 13, 15, 16],\n    ['2021', 10, 11, 12, 13, 15, 16],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  ngAfterViewInit(): void {\n    this.hotTable?.hotInstance?.setDataAtCell(0, 1, 'Ford');\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example10.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example10","exampleTitle":"Understand binding as a reference","docPermalink":"/binding-to-data","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Understand binding as a reference · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example10-binding-data></example10-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example10-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  readonly data: string[][] = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  ngAfterViewInit(): void {\n    this.hotTable?.hotInstance?.setDataAtCell(0, 4, 'Denver');\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example10.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example10","exampleTitle":"Understand binding as a reference","docPermalink":"/binding-to-data","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example11.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example11.ts.json
index 239fb8bff..0c5d496c5 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example11.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example11.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Working with a copy of data · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example11-binding-data></example11-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example11-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"dataAfterClone\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Array<Array<string | number>> = [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n    ['2017', 10, 11, 12, 13, 15, 16],\n    ['2018', 10, 11, 12, 13, 15, 16],\n    ['2019', 10, 11, 12, 13, 15, 16],\n    ['2020', 10, 11, 12, 13, 15, 16],\n    ['2021', 10, 11, 12, 13, 15, 16],\n  ];\n  readonly dataAfterClone = structuredClone(this.data);\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example11.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example11","exampleTitle":"Working with a copy of data","docPermalink":"/binding-to-data","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Working with a copy of data · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example11-binding-data></example11-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example11-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"dataAfterClone\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: string[][] = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ];\n  readonly dataAfterClone = structuredClone(this.data);\n\n  readonly gridSettings: GridSettings = {\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example11.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example11","exampleTitle":"Working with a copy of data","docPermalink":"/binding-to-data","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example2.ts.json
index 795117e15..c636ab21f 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Array of arrays with a selective display of columns · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-binding-data></example2-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: Array<Array<string | number>> = [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n    ['2017', 10, 11, 12, 13, 15, 16],\n    ['2018', 10, 11, 12, 13, 15, 16],\n    ['2019', 10, 11, 12, 13, 15, 16],\n    ['2020', 10, 11, 12, 13, 15, 16],\n    ['2021', 10, 11, 12, 13, 15, 16],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: true,\n    height: 'auto',\n    width: 'auto',\n    columns: [\n      { data: 0 },\n      // skip the second column\n      { data: 2 },\n      { data: 3 },\n      { data: 4 },\n      { data: 5 },\n      { data: 6 },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example2.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example2","exampleTitle":"Array of arrays with a selective display of columns","docPermalink":"/binding-to-data","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Binding to data · Array of arrays with a selective display of columns · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-binding-data></example2-binding-data>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-binding-data',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent {\n\n  readonly data: string[][] = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n    height: 'auto',\n    width: 'auto',\n    columns: [\n      { data: 0 },\n      { data: 1 },\n      // skip the third column\n      { data: 3 },\n      { data: 4 },\n    ],\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/binding-to-data/angular/example2.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example2","exampleTitle":"Array of arrays with a selective display of columns","docPermalink":"/binding-to-data","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example1.js.json
index a2b45f7ae..01499257c 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst data = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 110, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nnew Handsontable(container, {\n  data,\n  startRows: 5,\n  startCols: 5,\n  height: 'auto',\n  width: 'auto',\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example1.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/binding-to-data","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n];\n\nnew Handsontable(container, {\n  data,\n  startRows: 5,\n  startCols: 5,\n  height: 'auto',\n  width: 'auto',\n  colHeaders: ['SKU', 'Product', 'Supplier', 'Category', 'Warehouse'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example1.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/binding-to-data","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example1.ts.json
index 032d36d3c..ddd6fefe1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst data: (string | number)[][] = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 110, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nnew Handsontable(container, {\n  data,\n  startRows: 5,\n  startCols: 5,\n  height: 'auto',\n  width: 'auto',\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example1.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/binding-to-data","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1')!;\nconst data: string[][] = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n];\n\nnew Handsontable(container, {\n  data,\n  startRows: 5,\n  startCols: 5,\n  height: 'auto',\n  width: 'auto',\n  colHeaders: ['SKU', 'Product', 'Supplier', 'Category', 'Warehouse'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example1.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/binding-to-data","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example10.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example10.js.json
index 472ee1840..28dfe916a 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example10.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example10.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Understand binding as a reference · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example10');\nconst data = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nconst settings = {\n  data,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hot = new Handsontable(container, settings);\n\nhot.setDataAtCell(0, 1, 'Ford');","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example10.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example10","exampleTitle":"Understand binding as a reference","docPermalink":"/binding-to-data","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Understand binding as a reference · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example10');\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n];\n\nconst settings = {\n  data,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hot = new Handsontable(container, settings);\n\nhot.setDataAtCell(0, 4, 'Denver');","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example10.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example10","exampleTitle":"Understand binding as a reference","docPermalink":"/binding-to-data","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example10.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example10.ts.json
index abad4a210..1dd34d6bf 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example10.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example10.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Understand binding as a reference · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example10')!;\nconst data: (string | number)[][] = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nconst settings = {\n  data,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hot = new Handsontable(container, settings);\n\nhot.setDataAtCell(0, 1, 'Ford');","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example10.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example10","exampleTitle":"Understand binding as a reference","docPermalink":"/binding-to-data","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Understand binding as a reference · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example10')!;\nconst data: string[][] = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n];\n\nconst settings = {\n  data,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst hot = new Handsontable(container, settings);\n\nhot.setDataAtCell(0, 4, 'Denver');","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example10.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example10","exampleTitle":"Understand binding as a reference","docPermalink":"/binding-to-data","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example11.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example11.js.json
index e1c00f840..e56696a30 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example11.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example11.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Working with a copy of data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example11');\nconst data = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nnew Handsontable(container, {\n  data: structuredClone(data),\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example11.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example11","exampleTitle":"Working with a copy of data","docPermalink":"/binding-to-data","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Working with a copy of data · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example11');\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n];\n\nnew Handsontable(container, {\n  data: structuredClone(data),\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example11.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example11","exampleTitle":"Working with a copy of data","docPermalink":"/binding-to-data","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example11.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example11.ts.json
index b9e2a5f9f..8adba18b9 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example11.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example11.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Working with a copy of data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example11')!;\nconst data: (string | number)[][] = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nnew Handsontable(container, {\n  data: structuredClone(data),\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example11.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example11","exampleTitle":"Working with a copy of data","docPermalink":"/binding-to-data","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Working with a copy of data · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example11')!;\nconst data: string[][] = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n];\n\nnew Handsontable(container, {\n  data: structuredClone(data),\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example11.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example11","exampleTitle":"Working with a copy of data","docPermalink":"/binding-to-data","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example2.js.json
index 56b073970..4ea9ce308 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Array of arrays with a selective display of columns · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nconst data = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  columns: [\n    { data: 0 },\n    // skip the second column\n    { data: 2 },\n    { data: 3 },\n    { data: 4 },\n    { data: 5 },\n    { data: 6 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example2.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example2","exampleTitle":"Array of arrays with a selective display of columns","docPermalink":"/binding-to-data","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Binding to data · Array of arrays with a selective display of columns · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2');\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n  height: 'auto',\n  width: 'auto',\n  columns: [\n    { data: 0 },\n    { data: 1 },\n    // skip the third column\n    { data: 3 },\n    { data: 4 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example2.js","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example2","exampleTitle":"Array of arrays with a selective display of columns","docPermalink":"/binding-to-data","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example2.ts.json
index 74ca9fab5..5addc8481 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Array of arrays with a selective display of columns · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\nconst data: (string | number)[][] = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  columns: [\n    { data: 0 },\n    // skip the second column\n    { data: 2 },\n    { data: 3 },\n    { data: 4 },\n    { data: 5 },\n    { data: 6 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example2.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example2","exampleTitle":"Array of arrays with a selective display of columns","docPermalink":"/binding-to-data","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Binding to data · Array of arrays with a selective display of columns · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example2')!;\nconst data: string[][] = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n];\n\nnew Handsontable(container, {\n  data,\n  colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n  height: 'auto',\n  width: 'auto',\n  columns: [\n    { data: 0 },\n    { data: 1 },\n    // skip the third column\n    { data: 3 },\n    { data: 4 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/binding-to-data/javascript/example2.ts","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example2","exampleTitle":"Array of arrays with a selective display of columns","docPermalink":"/binding-to-data","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example1.tsx.json
index 66a3b9700..a0e5650bb 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Binding to data · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data: Array<Array<string | number>> = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    data={data}\n    startRows={5}\n    startCols={5}\n    height=\"auto\"\n    width=\"auto\"\n    colHeaders={true}\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example1.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/binding-to-data","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Binding to data · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data: string[][] = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n];\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    data={data}\n    startRows={5}\n    startCols={5}\n    height=\"auto\"\n    width=\"auto\"\n    colHeaders={['SKU', 'Product', 'Supplier', 'Category', 'Warehouse']}\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example1.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/binding-to-data","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example10.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example10.tsx.json
index 70650ee2d..57e028de1 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example10.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example10.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Binding to data · Understand binding as a reference · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example10\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef, FC } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register Handsontable's modules\nregisterAllModules();\n\nconst data: Array<Array<string | number>> = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nconst ExampleComponent: FC = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  useEffect(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (hot) {\n      hot.setDataAtCell(0, 1, 'Ford');\n    }\n  }, []); // run once\n\n  return (\n    <HotTable\n      ref={hotRef}\n      data={data}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example10.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example10","exampleTitle":"Understand binding as a reference","docPermalink":"/binding-to-data","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Binding to data · Understand binding as a reference · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example10\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef, FC } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register Handsontable's modules\nregisterAllModules();\n\nconst data: string[][] = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n];\n\nconst ExampleComponent: FC = () => {\n  const hotRef = useRef<HotTableRef>(null);\n\n  useEffect(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    if (hot) {\n      hot.setDataAtCell(0, 4, 'Denver');\n    }\n  }, []); // run once\n\n  return (\n    <HotTable\n      ref={hotRef}\n      data={data}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example10.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example10","exampleTitle":"Understand binding as a reference","docPermalink":"/binding-to-data","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example11.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example11.tsx.json
index 93e8c9fc0..c20e3d2dc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example11.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example11.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Binding to data · Working with a copy of data · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example11\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data: Array<Array<string | number>> = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nconst clonedData = structuredClone(data);\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    data={clonedData}\n    height=\"auto\"\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example11.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example11","exampleTitle":"Working with a copy of data","docPermalink":"/binding-to-data","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Binding to data · Working with a copy of data · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example11\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data: string[][] = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n];\n\nconst clonedData = structuredClone(data);\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    data={clonedData}\n    height=\"auto\"\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example11.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example11","exampleTitle":"Working with a copy of data","docPermalink":"/binding-to-data","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example2.tsx.json
index e9233e146..73d939f62 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Binding to data · Array of arrays with a selective display of columns · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data: Array<Array<string | number>> = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    data={data}\n    colHeaders={true}\n    height=\"auto\"\n    width=\"auto\"\n    columns={[\n      { data: 0 },\n      // skip the second column\n      { data: 2 },\n      { data: 3 },\n      { data: 4 },\n      { data: 5 },\n      { data: 6 },\n    ]}\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example2.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example2","exampleTitle":"Array of arrays with a selective display of columns","docPermalink":"/binding-to-data","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Binding to data · Array of arrays with a selective display of columns · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data: string[][] = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n];\n\nconst ExampleComponent: FC = () => (\n  <HotTable\n    data={data}\n    colHeaders={['SKU', 'Product', 'Category', 'Warehouse']}\n    height=\"auto\"\n    width=\"auto\"\n    columns={[\n      { data: 0 },\n      { data: 1 },\n      // skip the third column\n      { data: 3 },\n      { data: 4 },\n    ]}\n    autoWrapRow={true}\n    autoWrapCol={true}\n    licenseKey=\"non-commercial-and-evaluation\"\n  />\n);\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/binding-to-data/react/example2.tsx","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example2","exampleTitle":"Array of arrays with a selective display of columns","docPermalink":"/binding-to-data","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example1.vue.json
index 834d3f21c..77b47397e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n    ['2017', 10, 11, 12, 13, 15, 16],\n    ['2018', 10, 11, 12, 13, 15, 16],\n    ['2019', 10, 11, 12, 13, 15, 16],\n    ['2020', 10, 11, 12, 13, 15, 16],\n    ['2021', 10, 11, 12, 13, 15, 16],\n  ],\n  startRows: 5,\n  startCols: 5,\n  height: 'auto',\n  width: 'auto',\n  colHeaders: true,\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example1.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/binding-to-data","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ],\n  startRows: 5,\n  startCols: 5,\n  height: 'auto',\n  width: 'auto',\n  colHeaders: ['SKU', 'Product', 'Supplier', 'Category', 'Warehouse'],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example1.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/binding-to-data","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example10.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example10.vue.json
index 8f3785b4a..6dbdfb1fa 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example10.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example10.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Understand binding as a reference · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example10\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n    ['2017', 10, 11, 12, 13, 15, 16],\n    ['2018', 10, 11, 12, 13, 15, 16],\n    ['2019', 10, 11, 12, 13, 15, 16],\n    ['2020', 10, 11, 12, 13, 15, 16],\n    ['2021', 10, 11, 12, 13, 15, 16],\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  hotRef.value?.hotInstance?.setDataAtCell(0, 1, 'Ford');\n});\n</script>\n\n<template>\n  <div id=\"example10\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example10.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example10","exampleTitle":"Understand binding as a reference","docPermalink":"/binding-to-data","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Understand binding as a reference · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example10\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example10\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nonMounted(() => {\n  hotRef.value?.hotInstance?.setDataAtCell(0, 4, 'Denver');\n});\n</script>\n\n<template>\n  <div id=\"example10\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example10.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example10","exampleTitle":"Understand binding as a reference","docPermalink":"/binding-to-data","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example11.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example11.vue.json
index 45694398a..9fb9e66b0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example11.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example11.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Working with a copy of data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example11\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n  ['2017', 10, 11, 12, 13, 15, 16],\n  ['2018', 10, 11, 12, 13, 15, 16],\n  ['2019', 10, 11, 12, 13, 15, 16],\n  ['2020', 10, 11, 12, 13, 15, 16],\n  ['2021', 10, 11, 12, 13, 15, 16],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data: structuredClone(data),\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example11\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example11.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example11","exampleTitle":"Working with a copy of data","docPermalink":"/binding-to-data","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Working with a copy of data · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example11\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example11\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n];\n\nconst hotSettings = ref<GridSettings>({\n  data: structuredClone(data),\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example11\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example11.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example11","exampleTitle":"Working with a copy of data","docPermalink":"/binding-to-data","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example2.vue.json
index 3ba885832..bed9ddc99 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__binding-to-data__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Array of arrays with a selective display of columns · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],\n    ['2017', 10, 11, 12, 13, 15, 16],\n    ['2018', 10, 11, 12, 13, 15, 16],\n    ['2019', 10, 11, 12, 13, 15, 16],\n    ['2020', 10, 11, 12, 13, 15, 16],\n    ['2021', 10, 11, 12, 13, 15, 16],\n  ],\n  colHeaders: true,\n  height: 'auto',\n  width: 'auto',\n  columns: [\n    { data: 0 },\n    // skip the second column\n    { data: 2 },\n    { data: 3 },\n    { data: 4 },\n    { data: 5 },\n    { data: 6 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example2.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example2","exampleTitle":"Array of arrays with a selective display of columns","docPermalink":"/binding-to-data","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Binding to data · Array of arrays with a selective display of columns · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n  height: 'auto',\n  width: 'auto',\n  columns: [\n    { data: 0 },\n    { data: 1 },\n    // skip the third column\n    { data: 3 },\n    { data: 4 },\n  ],\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/binding-to-data/vue/example2.vue","breadcrumb":["Getting Started","Binding to data"],"guide":"guides/getting-started/binding-to-data/binding-to-data.md","guideTitle":"Binding to data","exampleId":"example2","exampleTitle":"Array of arrays with a selective display of columns","docPermalink":"/binding-to-data","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__angular__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__angular__example2.ts.json
index d3b0d8210..f33964ed2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__angular__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__angular__example2.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-events-hooks id=\"example2\"></example2-events-hooks>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-events-hooks',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  lastChange: string | any[] | null = null;\n\n  data = [\n    ['Tesla', 2017, 'black', 'black'],\n    ['Nissan', 2018, 'blue', 'blue'],\n    ['Chrysler', 2019, 'yellow', 'black'],\n    ['Volvo', 2020, 'yellow', 'gray'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: true,\n    rowHeaders: true,\n    height: 'auto',\n    minSpareRows: 1,\n    beforeChange: (changes: any, source: any) => {\n      this.lastChange = changes;\n    },\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  ngAfterViewInit(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    hot?.updateSettings({\n      beforeKeyDown: (e) => {\n        const selection = hot?.getSelected()?.[0];\n\n        if (!selection) return undefined;\n\n        // Ignore header and corner selections (row or column index < 0)\n        if (selection[0] < 0 || selection[1] < 0) return undefined;\n\n        console.log(selection);\n\n        // BACKSPACE or DELETE\n        if (e.keyCode === 8 || e.keyCode === 46) {\n          // remove data at cell, shift the cells below it up\n          const column = hot.getDataAtCol(selection[1]);\n          const shiftedUp = column.slice(selection[0] + 1);\n          shiftedUp.push(null);\n          hot.populateFromArray(selection[0], selection[1], shiftedUp.map(value => [value]));\n          e.preventDefault();\n          this.lastChange = null;\n\n          // block the default deletion behavior\n          return false;\n        }\n\n        // ENTER\n        if (e.keyCode === 13) {\n          // if last change affected a single cell and did not change it's values\n          if (\n            this.lastChange &&\n            this.lastChange.length === 1 &&\n            this.lastChange[0][2] == this.lastChange[0][3]\n          ) {\n            // insert an empty cell, shift the cells below it down\n            const column = hot.getDataAtCol(selection[1]);\n            const shiftedDown = ['', ...column.slice(selection[0])];\n            hot.populateFromArray(selection[0], selection[1], shiftedDown.map(value => [value]));\n            // add new cell\n            hot.selectCell(selection[0], selection[1]);\n            // select new cell\n            this.lastChange = null;\n\n            // block the default Enter behavior\n            return false;\n          }\n        }\n\n        this.lastChange = null;\n\n        return undefined;\n      },\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/events-and-hooks/angular/example2.ts","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example2","exampleTitle":"The beforeKeyDown callback","docPermalink":"/events-and-hooks","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example2-events-hooks id=\"example2\"></example2-events-hooks>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { AfterViewInit, Component, ViewChild } from '@angular/core';\nimport { GridSettings, HotTableComponent, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example2-events-hooks',\n  standalone: true,\n  imports: [HotTableModule],\n  template: ` <div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n  </div>`,\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(HotTableComponent, { static: false }) readonly hotTable!: HotTableComponent;\n\n  lastChange: string | any[] | null = null;\n\n  data = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n  ];\n\n  readonly gridSettings: GridSettings = {\n    colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n    rowHeaders: true,\n    height: 'auto',\n    minSpareRows: 1,\n    beforeChange: (changes: any, source: any) => {\n      this.lastChange = changes;\n    },\n    autoWrapRow: true,\n    autoWrapCol: true\n  };\n\n  ngAfterViewInit(): void {\n    const hot = this.hotTable?.hotInstance;\n\n    hot?.updateSettings({\n      beforeKeyDown: (e) => {\n        const selection = hot?.getSelected()?.[0];\n\n        if (!selection) return undefined;\n\n        // Ignore header and corner selections (row or column index < 0)\n        if (selection[0] < 0 || selection[1] < 0) return undefined;\n\n        console.log(selection);\n\n        // BACKSPACE or DELETE\n        if (e.keyCode === 8 || e.keyCode === 46) {\n          // remove data at cell, shift the cells below it up\n          const column = hot.getDataAtCol(selection[1]);\n          const shiftedUp = column.slice(selection[0] + 1);\n          shiftedUp.push(null);\n          hot.populateFromArray(selection[0], selection[1], shiftedUp.map(value => [value]));\n          e.preventDefault();\n          this.lastChange = null;\n\n          // block the default deletion behavior\n          return false;\n        }\n\n        // ENTER\n        if (e.keyCode === 13) {\n          // if last change affected a single cell and did not change it's values\n          if (\n            this.lastChange &&\n            this.lastChange.length === 1 &&\n            this.lastChange[0][2] == this.lastChange[0][3]\n          ) {\n            // insert an empty cell, shift the cells below it down\n            const column = hot.getDataAtCol(selection[1]);\n            const shiftedDown = ['', ...column.slice(selection[0])];\n            hot.populateFromArray(selection[0], selection[1], shiftedDown.map(value => [value]));\n            // add new cell\n            hot.selectCell(selection[0], selection[1]);\n            // select new cell\n            this.lastChange = null;\n\n            // block the default Enter behavior\n            return false;\n          }\n        }\n\n        this.lastChange = null;\n\n        return undefined;\n      },\n    });\n  }\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\n\n// register Handsontable's modules\nregisterAllModules();\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    {\n      provide: HOT_GLOBAL_CONFIG,\n      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,\n    },\n  ],\n};"},"docsPath":"guides/getting-started/events-and-hooks/angular/example2.ts","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example2","exampleTitle":"The beforeKeyDown callback","docPermalink":"/events-and-hooks","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example1.js.json
index 541698f42..901758148 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Events and hooks · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-container\">\n    <div class=\"example-table-container\">\n      <div id=\"example1\"></div>\n    </div>\n    <div id=\"example1_events\"></div>\n    <aside aria-label=\"Tip\" class=\"starlight-aside starlight-aside--tip\">\n      <p class=\"starlight-aside__title\" aria-hidden=\"true\">Tip</p>\n      <div class=\"starlight-aside__content\"><p>Open the Developer Tools Console tab to see each event details object.</p></div>\n    </aside>\n    <strong> Choose events to be logged:</strong>\n    <ul id=\"hooksList\">\n      <li>\n        <label><input type=\"checkbox\" id=\"check_select_all\" />Select all</label>\n      </li>\n    </ul>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst config = {\n    data: [\n        ['', 'Tesla', 'Mazda', 'Mercedes', 'Mini', 'Mitsubishi'],\n        ['2017', 0, 2941, 4303, 354, 5814],\n        ['2018', 3, 2905, 2867, 412, 5284],\n        ['2019', 4, 2517, 4822, 552, 6127],\n        ['2020', 2, 2422, 5399, 776, 4151],\n    ],\n    minRows: 5,\n    minCols: 6,\n    height: 'auto',\n    stretchH: 'all',\n    minSpareRows: 1,\n    autoWrapRow: true,\n    colHeaders: true,\n    contextMenu: true,\n    autoWrapCol: true,\n    dropdownMenu: true,\n    filters: true,\n    columnSorting: true,\n    mergeCells: true,\n    comments: true,\n    manualColumnMove: true,\n    manualRowMove: true,\n    moveCells: true,\n    licenseKey: 'non-commercial-and-evaluation',\n};\nconst example1Events = document.getElementById('example1_events');\nconst hooksList = document.getElementById('hooksList');\nconst hooks = Handsontable.hooks.getRegistered();\nhooks.forEach((hook) => {\n    let checked = '';\n    if (hook === 'afterChange' ||\n        hook === 'afterSelection' ||\n        hook === 'afterCreateRow' ||\n        hook === 'afterRemoveRow' ||\n        hook === 'afterCreateCol' ||\n        hook === 'afterRemoveCol') {\n        checked = 'checked';\n    }\n    hooksList.innerHTML += `<li><label><input type=\"checkbox\" ${checked} id=\"check_${hook}\"> ${hook}</label></li>`;\n    config[hook] = function () {\n        log_events(hook, arguments);\n    };\n});\nconst start = new Date().getTime();\nlet i = 0;\nlet timer;\n/**\n * @param event\n * @param data\n */\nfunction log_events(event, data) {\n    if (document.getElementById(`check_${event}`).checked) {\n        const now = new Date().getTime();\n        const diff = now - start;\n        let str;\n        const vals = [i, `@${(diff / 1000).toFixed(3)}`, `[${event}]`];\n        for (let d = 0; d < data.length; d++) {\n            try {\n                str = JSON.stringify(data[d]);\n            }\n            catch (e) {\n                str = data[d].toString();\n            }\n            if (str === void 0) {\n                continue;\n            }\n            if (str.length > 20) {\n                str = typeof data[d] === 'object' ? `object: ${str.substr(0, 20)}...}` : str.toString();\n            }\n            if (d < data.length - 1) {\n                str += ',';\n            }\n            vals.push(str);\n        }\n        if (window.console) {\n            console.log(i, `@${(diff / 1000).toFixed(3)}`, `[${event}]`, data);\n        }\n        const div = document.createElement('div');\n        const text = document.createTextNode(vals.join(' '));\n        div.appendChild(text);\n        example1Events.appendChild(div);\n        clearTimeout(timer);\n        timer = setTimeout(() => {\n            example1Events.scrollTop = example1Events.scrollHeight;\n        }, 10);\n        i++;\n    }\n}\nconst example1 = document.querySelector('#example1');\nnew Handsontable(example1, config);\ndocument.querySelector('#check_select_all').addEventListener('click', function () {\n    const state = this.checked;\n    const inputs = document.querySelectorAll('#hooksList input[type=checkbox]');\n    Array.prototype.forEach.call(inputs, (input) => {\n        input.checked = state;\n    });\n});\ndocument.querySelector('#hooksList input[type=checkbox]').addEventListener('click', function () {\n    if (!this.checked) {\n        document.getElementById('check_select_all').checked = false;\n    }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/events-and-hooks/javascript/example1.js","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/events-and-hooks","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Events and hooks · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div class=\"example-container\">\n    <div class=\"example-table-container\">\n      <div id=\"example1\"></div>\n    </div>\n    <div id=\"example1_events\"></div>\n    <aside aria-label=\"Tip\" class=\"starlight-aside starlight-aside--tip\">\n      <p class=\"starlight-aside__title\" aria-hidden=\"true\">Tip</p>\n      <div class=\"starlight-aside__content\"><p>Open the Developer Tools Console tab to see each event details object.</p></div>\n    </aside>\n    <strong> Choose events to be logged:</strong>\n    <ul id=\"hooksList\">\n      <li>\n        <label><input type=\"checkbox\" id=\"check_select_all\" />Select all</label>\n      </li>\n    </ul>\n  </div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst config = {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ],\n  minRows: 5,\n  minCols: 5,\n  height: 'auto',\n  stretchH: 'all',\n  minSpareRows: 1,\n  autoWrapRow: true,\n  colHeaders: ['SKU', 'Product', 'Supplier', 'Category', 'Warehouse'],\n  contextMenu: true,\n  autoWrapCol: true,\n  dropdownMenu: true,\n  filters: true,\n  columnSorting: true,\n  mergeCells: true,\n  comments: true,\n  manualColumnMove: true,\n  manualRowMove: true,\n  moveCells: true,\n  licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst example1Events = document.getElementById('example1_events');\nconst hooksList = document.getElementById('hooksList');\nconst hooks = Handsontable.hooks.getRegistered();\n\nhooks.forEach((hook) => {\n  let checked = '';\n\n  if (\n    hook === 'afterChange' ||\n    hook === 'afterSelection' ||\n    hook === 'afterCreateRow' ||\n    hook === 'afterRemoveRow' ||\n    hook === 'afterCreateCol' ||\n    hook === 'afterRemoveCol'\n  ) {\n    checked = 'checked';\n  }\n\n  hooksList.innerHTML += `<li><label><input type=\"checkbox\" ${checked} id=\"check_${hook}\"> ${hook}</label></li>`;\n  config[hook] = function () {\n    log_events(hook, arguments);\n  };\n});\n\nconst start = new Date().getTime();\nlet i = 0;\nlet timer;\n\n/**\n * @param event\n * @param data\n */\nfunction log_events(event, data) {\n  if (document.getElementById(`check_${event}`).checked) {\n    const now = new Date().getTime();\n    const diff = now - start;\n    let str;\n    const vals = [i, `@${(diff / 1000).toFixed(3)}`, `[${event}]`];\n\n    for (let d = 0; d < data.length; d++) {\n      try {\n        str = JSON.stringify(data[d]);\n      } catch (e) {\n        str = data[d].toString();\n      }\n\n      if (str === void 0) {\n        continue;\n      }\n\n      if (str.length > 20) {\n        str = typeof data[d] === 'object' ? `object: ${str.substr(0, 20)}...}` : str.toString();\n      }\n\n      if (d < data.length - 1) {\n        str += ',';\n      }\n\n      vals.push(str);\n    }\n\n    if (window.console) {\n      console.log(i, `@${(diff / 1000).toFixed(3)}`, `[${event}]`, data);\n    }\n\n    const div = document.createElement('div');\n    const text = document.createTextNode(vals.join(' '));\n\n    div.appendChild(text);\n\n    example1Events.appendChild(div);\n\n    clearTimeout(timer);\n\n    timer = setTimeout(() => {\n      example1Events.scrollTop = example1Events.scrollHeight;\n    }, 10);\n\n    i++;\n  }\n}\n\nconst example1 = document.querySelector('#example1');\n\nnew Handsontable(example1, config);\n\ndocument.querySelector('#check_select_all').addEventListener('click', function () {\n  const state = this.checked;\n  const inputs = document.querySelectorAll('#hooksList input[type=checkbox]');\n\n  Array.prototype.forEach.call(inputs, (input) => {\n    input.checked = state;\n  });\n});\n\ndocument.querySelector('#hooksList input[type=checkbox]').addEventListener('click', function () {\n  if (!this.checked) {\n    document.getElementById('check_select_all').checked = false;\n  }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/events-and-hooks/javascript/example1.js","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/events-and-hooks","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example2.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example2.js.json
index 32088bc9a..2d8d7c73d 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example2.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example2.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n// Register all Handsontable's modules.\nregisterAllModules();\nlet lastChange = null;\nconst container = document.querySelector('#example2');\nconst hot = new Handsontable(container, {\n  data: [\n    ['Tesla', 2017, 'black', 'black'],\n    ['Nissan', 2018, 'blue', 'blue'],\n    ['Chrysler', 2019, 'yellow', 'black'],\n    ['Volvo', 2020, 'yellow', 'gray'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  minSpareRows: 1,\n  beforeChange(changes) {\n    lastChange = changes;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\nhot.updateSettings({\n  beforeKeyDown(e) {\n    const selected = hot.getSelected();\n    if (!selected)\n      return;\n    const selection = selected[0];\n    // Ignore header and corner selections (row or column index < 0)\n    if (selection[0] < 0 || selection[1] < 0)\n      return;\n    console.log(selection);\n    // BACKSPACE or DELETE\n    if (e.keyCode === 8 || e.keyCode === 46) {\n      // remove data at cell, shift the cells below it up\n      const column = hot.getDataAtCol(selection[1]);\n      const shiftedUp = column.slice(selection[0] + 1);\n      shiftedUp.push(null);\n      hot.populateFromArray(selection[0], selection[1], shiftedUp.map(value => [value]));\n      e.preventDefault();\n      lastChange = null;\n      // block the default deletion behavior\n      return false;\n    }\n    // ENTER\n    if (e.keyCode === 13) {\n      // if last change affected a single cell and did not change it's values\n      if (lastChange && lastChange.length === 1 && lastChange[0][2] == lastChange[0][3]) {\n        // insert an empty cell, shift the cells below it down\n        const column = hot.getDataAtCol(selection[1]);\n        const shiftedDown = ['', ...column.slice(selection[0])];\n        hot.populateFromArray(selection[0], selection[1], shiftedDown.map(value => [value]));\n        // add new cell\n        hot.selectCell(selection[0], selection[1]);\n        // select new cell\n        lastChange = null;\n        // block the default Enter behavior\n        return false;\n      }\n    }\n    lastChange = null;\n  },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/events-and-hooks/javascript/example2.js","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example2","exampleTitle":"The beforeKeyDown callback","docPermalink":"/events-and-hooks","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nlet lastChange = null;\nconst container = document.querySelector('#example2');\nconst hot = new Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n  rowHeaders: true,\n  height: 'auto',\n  minSpareRows: 1,\n  beforeChange(changes) {\n    lastChange = changes;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n  beforeKeyDown(e) {\n    const selected = hot.getSelected();\n\n    if (!selected) return;\n\n    const selection = selected[0];\n\n    // Ignore header and corner selections (row or column index < 0)\n    if (selection[0] < 0 || selection[1] < 0) return;\n\n    console.log(selection);\n\n    // BACKSPACE or DELETE\n    if (e.keyCode === 8 || e.keyCode === 46) {\n      // remove data at cell, shift the cells below it up\n      const column = hot.getDataAtCol(selection[1]);\n      const shiftedUp = column.slice(selection[0] + 1);\n      shiftedUp.push(null);\n      hot.populateFromArray(\n        selection[0],\n        selection[1],\n        shiftedUp.map((value) => [value]),\n      );\n      e.preventDefault();\n      lastChange = null;\n\n      // block the default deletion behavior\n      return false;\n    }\n\n    // ENTER\n    if (e.keyCode === 13) {\n      // if last change affected a single cell and did not change it's values\n      if (lastChange && lastChange.length === 1 && lastChange[0][2] == lastChange[0][3]) {\n        // insert an empty cell, shift the cells below it down\n        const column = hot.getDataAtCol(selection[1]);\n        const shiftedDown = ['', ...column.slice(selection[0])];\n        hot.populateFromArray(\n          selection[0],\n          selection[1],\n          shiftedDown.map((value) => [value]),\n        );\n        // add new cell\n        hot.selectCell(selection[0], selection[1]);\n        // select new cell\n        lastChange = null;\n\n        // block the default Enter behavior\n        return false;\n      }\n    }\n\n    lastChange = null;\n  },\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/events-and-hooks/javascript/example2.js","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example2","exampleTitle":"The beforeKeyDown callback","docPermalink":"/events-and-hooks","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example2.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example2.ts.json
index 50d545032..790ee80e0 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example2.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__javascript__example2.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nlet lastChange: (Handsontable.CellChange | null)[] | null = null;\nconst container = document.querySelector('#example2')!;\nconst hot = new Handsontable(container, {\n  data: [\n    ['Tesla', 2017, 'black', 'black'],\n    ['Nissan', 2018, 'blue', 'blue'],\n    ['Chrysler', 2019, 'yellow', 'black'],\n    ['Volvo', 2020, 'yellow', 'gray'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  minSpareRows: 1,\n  beforeChange(changes) {\n    lastChange = changes;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n  beforeKeyDown(e) {\n    const selected = hot.getSelected();\n\n    if (!selected) return;\n\n    const selection = selected[0]!;\n\n    // Ignore header and corner selections (row or column index < 0)\n    if (selection[0] < 0 || selection[1] < 0) return;\n\n    console.log(selection);\n\n    // BACKSPACE or DELETE\n    if (e.keyCode === 8 || e.keyCode === 46) {\n      // remove data at cell, shift the cells below it up\n      const column = hot.getDataAtCol(selection[1]);\n      const shiftedUp = column.slice(selection[0] + 1);\n      shiftedUp.push(null);\n      hot.populateFromArray(selection[0], selection[1], shiftedUp.map(value => [value]));\n      e.preventDefault();\n      lastChange = null;\n\n      // block the default deletion behavior\n      return false;\n    }\n\n    // ENTER\n    if (e.keyCode === 13) {\n      // if last change affected a single cell and did not change it's values\n      if (lastChange && lastChange.length === 1 && lastChange[0]![2] == lastChange[0]![3]) {\n        // insert an empty cell, shift the cells below it down\n        const column = hot.getDataAtCol(selection[1]);\n        const shiftedDown = ['', ...column.slice(selection[0])];\n        hot.populateFromArray(selection[0], selection[1], shiftedDown.map(value => [value]));\n        // add new cell\n        hot.selectCell(selection[0], selection[1]);\n        // select new cell\n        lastChange = null;\n\n        // block the default Enter behavior\n        return false;\n      }\n    }\n\n    lastChange = null;\n  },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/events-and-hooks/javascript/example2.ts","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example2","exampleTitle":"The beforeKeyDown callback","docPermalink":"/events-and-hooks","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nlet lastChange: (Handsontable.CellChange | null)[] | null = null;\nconst container = document.querySelector('#example2')!;\nconst hot = new Handsontable(container, {\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n  rowHeaders: true,\n  height: 'auto',\n  minSpareRows: 1,\n  beforeChange(changes) {\n    lastChange = changes;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\nhot.updateSettings({\n  beforeKeyDown(e) {\n    const selected = hot.getSelected();\n\n    if (!selected) return;\n\n    const selection = selected[0]!;\n\n    // Ignore header and corner selections (row or column index < 0)\n    if (selection[0] < 0 || selection[1] < 0) return;\n\n    console.log(selection);\n\n    // BACKSPACE or DELETE\n    if (e.keyCode === 8 || e.keyCode === 46) {\n      // remove data at cell, shift the cells below it up\n      const column = hot.getDataAtCol(selection[1]);\n      const shiftedUp = column.slice(selection[0] + 1);\n      shiftedUp.push(null);\n      hot.populateFromArray(selection[0], selection[1], shiftedUp.map(value => [value]));\n      e.preventDefault();\n      lastChange = null;\n\n      // block the default deletion behavior\n      return false;\n    }\n\n    // ENTER\n    if (e.keyCode === 13) {\n      // if last change affected a single cell and did not change it's values\n      if (lastChange && lastChange.length === 1 && lastChange[0]![2] == lastChange[0]![3]) {\n        // insert an empty cell, shift the cells below it down\n        const column = hot.getDataAtCol(selection[1]);\n        const shiftedDown = ['', ...column.slice(selection[0])];\n        hot.populateFromArray(selection[0], selection[1], shiftedDown.map(value => [value]));\n        // add new cell\n        hot.selectCell(selection[0], selection[1]);\n        // select new cell\n        lastChange = null;\n\n        // block the default Enter behavior\n        return false;\n      }\n    }\n\n    lastChange = null;\n  },\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/events-and-hooks/javascript/example2.ts","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example2","exampleTitle":"The beforeKeyDown callback","docPermalink":"/events-and-hooks","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__react__example2.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__react__example2.tsx.json
index ba8f88a9d..f694a1d4e 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__react__example2.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__react__example2.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['Tesla', 2017, 'black', 'black'],\n  ['Nissan', 2018, 'blue', 'blue'],\n  ['Chrysler', 2019, 'yellow', 'black'],\n  ['Volvo', 2020, 'yellow', 'gray'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  let lastChange: string | any[] | null = null;\n\n  useEffect(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    hot?.updateSettings({\n      beforeKeyDown(e) {\n        const selection = hot?.getSelected()?.[0];\n\n        if (!selection) return;\n\n        // Ignore header and corner selections (row or column index < 0)\n        if (selection[0] < 0 || selection[1] < 0) return;\n\n        console.log(selection);\n\n        // BACKSPACE or DELETE\n        if (e.keyCode === 8 || e.keyCode === 46) {\n          // remove data at cell, shift the cells below it up\n          const column = hot.getDataAtCol(selection[1]);\n          const shiftedUp = column.slice(selection[0] + 1);\n          shiftedUp.push(null);\n          hot.populateFromArray(selection[0], selection[1], shiftedUp.map(value => [value]));\n          e.preventDefault();\n          lastChange = null;\n\n          // block the default deletion behavior\n          return false;\n        }\n\n        // ENTER\n        if (e.keyCode === 13) {\n          // if last change affected a single cell and did not change it's values\n          if (lastChange && lastChange.length === 1 && lastChange[0][2] == lastChange[0][3]) {\n            // insert an empty cell, shift the cells below it down\n            const column = hot.getDataAtCol(selection[1]);\n            const shiftedDown = ['', ...column.slice(selection[0])];\n            hot.populateFromArray(selection[0], selection[1], shiftedDown.map(value => [value]));\n            // add new cell\n            hot.selectCell(selection[0], selection[1]);\n            // select new cell\n            lastChange = null;\n\n            // block the default Enter behavior\n            return false;\n          }\n        }\n\n        lastChange = null;\n      },\n    });\n  });\n\n  return (\n    <HotTable\n      data={data}\n      colHeaders={true}\n      rowHeaders={true}\n      height=\"auto\"\n      minSpareRows={1}\n      beforeChange={(changes, source) => {\n        lastChange = changes;\n      }}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      ref={hotRef}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/events-and-hooks/react/example2.tsx","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example2","exampleTitle":"The beforeKeyDown callback","docPermalink":"/events-and-hooks","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example2\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, useRef } from 'react';\nimport { HotTable, HotTableRef } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n];\n\nconst ExampleComponent = () => {\n  const hotRef = useRef<HotTableRef>(null);\n  let lastChange: string | any[] | null = null;\n\n  useEffect(() => {\n    const hot = hotRef.current?.hotInstance;\n\n    hot?.updateSettings({\n      beforeKeyDown(e) {\n        const selection = hot?.getSelected()?.[0];\n\n        if (!selection) return;\n\n        // Ignore header and corner selections (row or column index < 0)\n        if (selection[0] < 0 || selection[1] < 0) return;\n\n        console.log(selection);\n\n        // BACKSPACE or DELETE\n        if (e.keyCode === 8 || e.keyCode === 46) {\n          // remove data at cell, shift the cells below it up\n          const column = hot.getDataAtCol(selection[1]);\n          const shiftedUp = column.slice(selection[0] + 1);\n          shiftedUp.push(null);\n          hot.populateFromArray(selection[0], selection[1], shiftedUp.map(value => [value]));\n          e.preventDefault();\n          lastChange = null;\n\n          // block the default deletion behavior\n          return false;\n        }\n\n        // ENTER\n        if (e.keyCode === 13) {\n          // if last change affected a single cell and did not change it's values\n          if (lastChange && lastChange.length === 1 && lastChange[0][2] == lastChange[0][3]) {\n            // insert an empty cell, shift the cells below it down\n            const column = hot.getDataAtCol(selection[1]);\n            const shiftedDown = ['', ...column.slice(selection[0])];\n            hot.populateFromArray(selection[0], selection[1], shiftedDown.map(value => [value]));\n            // add new cell\n            hot.selectCell(selection[0], selection[1]);\n            // select new cell\n            lastChange = null;\n\n            // block the default Enter behavior\n            return false;\n          }\n        }\n\n        lastChange = null;\n      },\n    });\n  });\n\n  return (\n    <HotTable\n      data={data}\n      colHeaders={['SKU', 'Product', 'Category', 'Warehouse']}\n      rowHeaders={true}\n      height=\"auto\"\n      minSpareRows={1}\n      beforeChange={(changes, source) => {\n        lastChange = changes;\n      }}\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\"\n      ref={hotRef}\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/events-and-hooks/react/example2.tsx","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example2","exampleTitle":"The beforeKeyDown callback","docPermalink":"/events-and-hooks","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__vue__example2.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__vue__example2.vue.json
index 66bdb3b1f..26c3962f2 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__vue__example2.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__events-and-hooks__vue__example2.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { CellChange } from 'handsontable/common';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nlet lastChange: CellChange[] | null = null;\n\nonMounted(() => {\n  const hot = hotRef.value?.hotInstance;\n\n  hot?.updateSettings({\n    beforeKeyDown(e) {\n      const selection = hot?.getSelected()?.[0];\n\n      if (!selection) return;\n      if (selection[0] < 0 || selection[1] < 0) return;\n\n      // BACKSPACE or DELETE\n      if (e.keyCode === 8 || e.keyCode === 46) {\n        // remove data at cell, shift the cells below it up\n        const column = hot.getDataAtCol(selection[1]);\n        const shiftedUp = column.slice(selection[0] + 1);\n        shiftedUp.push(null);\n        hot.populateFromArray(selection[0], selection[1], shiftedUp.map(value => [value]));\n        e.preventDefault();\n        lastChange = null;\n\n        // block the default deletion behavior\n        return false;\n      }\n\n      // ENTER\n      if (e.keyCode === 13) {\n        // if last change affected a single cell and did not change its values\n        if (lastChange && lastChange.length === 1 && lastChange[0][2] == lastChange[0][3]) {\n          // insert an empty cell, shift the cells below it down\n          const column = hot.getDataAtCol(selection[1]);\n          const shiftedDown = ['', ...column.slice(selection[0])];\n          hot.populateFromArray(selection[0], selection[1], shiftedDown.map(value => [value]));\n          // add new cell\n          hot.selectCell(selection[0], selection[1]);\n          lastChange = null;\n\n          // block the default Enter behavior\n          return false;\n        }\n      }\n\n      lastChange = null;\n    },\n  });\n});\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['Tesla', 2017, 'black', 'black'],\n    ['Nissan', 2018, 'blue', 'blue'],\n    ['Chrysler', 2019, 'yellow', 'black'],\n    ['Volvo', 2020, 'yellow', 'gray'],\n  ],\n  colHeaders: true,\n  rowHeaders: true,\n  height: 'auto',\n  minSpareRows: 1,\n  beforeChange(changes) {\n    lastChange = changes;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/events-and-hooks/vue/example2.vue","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example2","exampleTitle":"The beforeKeyDown callback","docPermalink":"/events-and-hooks","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Events and hooks · The beforeKeyDown callback · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example2\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example2\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref, onMounted, useTemplateRef } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\nimport type { CellChange } from 'handsontable/common';\n\nregisterAllModules();\n\nconst hotRef = useTemplateRef<InstanceType<typeof HotTable>>('hotRef');\nlet lastChange: CellChange[] | null = null;\n\nonMounted(() => {\n  const hot = hotRef.value?.hotInstance;\n\n  hot?.updateSettings({\n    beforeKeyDown(e) {\n      const selection = hot?.getSelected()?.[0];\n\n      if (!selection) return;\n      if (selection[0] < 0 || selection[1] < 0) return;\n\n      // BACKSPACE or DELETE\n      if (e.keyCode === 8 || e.keyCode === 46) {\n        // remove data at cell, shift the cells below it up\n        const column = hot.getDataAtCol(selection[1]);\n        const shiftedUp = column.slice(selection[0] + 1);\n        shiftedUp.push(null);\n        hot.populateFromArray(selection[0], selection[1], shiftedUp.map(value => [value]));\n        e.preventDefault();\n        lastChange = null;\n\n        // block the default deletion behavior\n        return false;\n      }\n\n      // ENTER\n      if (e.keyCode === 13) {\n        // if last change affected a single cell and did not change its values\n        if (lastChange && lastChange.length === 1 && lastChange[0][2] == lastChange[0][3]) {\n          // insert an empty cell, shift the cells below it down\n          const column = hot.getDataAtCol(selection[1]);\n          const shiftedDown = ['', ...column.slice(selection[0])];\n          hot.populateFromArray(selection[0], selection[1], shiftedDown.map(value => [value]));\n          // add new cell\n          hot.selectCell(selection[0], selection[1]);\n          lastChange = null;\n\n          // block the default Enter behavior\n          return false;\n        }\n      }\n\n      lastChange = null;\n    },\n  });\n});\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Drinkware', 'Minneapolis'],\n  ],\n  colHeaders: ['SKU', 'Product', 'Category', 'Warehouse'],\n  rowHeaders: true,\n  height: 'auto',\n  minSpareRows: 1,\n  beforeChange(changes) {\n    lastChange = changes;\n  },\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example2\">\n    <HotTable ref=\"hotRef\" :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/events-and-hooks/vue/example2.vue","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example2","exampleTitle":"The beforeKeyDown callback","docPermalink":"/events-and-hooks","lang":"Vue 3"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__angular__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__angular__example1.ts.json
index 71fce5297..ed8861550 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__angular__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__angular__example1.ts.json
@@ -1 +1 @@
-{"framework":"angular","displayName":"Getting Started ▸ Installation · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example-installation></example-installation>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example-installation',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `<div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],\n    ['2019', 10, 11, 12, 13],\n    ['2020', 20, 11, 14, 13],\n    ['2021', 30, 15, 12, 13],\n    ['2022', 25, 20, 11, 14],\n  ];\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: true,\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\nimport { registerLanguageDictionary, enUS } from \"handsontable/i18n\";\n\nregisterLanguageDictionary(enUS);\nregisterAllModules();\n\nconst globalHotConfig: HotGlobalConfig = {\n  license: NON_COMMERCIAL_LICENSE,\n  layoutDirection: \"ltr\",\n  language: enUS.languageCode,\n};\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    { provide: HOT_GLOBAL_CONFIG, useValue: globalHotConfig },\n  ],\n};"},"docsPath":"guides/getting-started/installation/angular/example1.ts","breadcrumb":["Getting Started","Installation"],"guide":"guides/getting-started/installation/installation.md","guideTitle":"Installation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/installation","lang":"Angular"}
+{"framework":"angular","displayName":"Getting Started ▸ Installation · Standard example · Angular","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"angular","htWrappers":["@handsontable/angular-wrapper"],"entry":"/src/main.ts","htmlEntry":"/src/index.html","devCommand":"pnpm exec ng serve --host 0.0.0.0 --port 3000","buildCommand":"ng build","outputDir":"dist","outputGlob":"dist/*/browser","staticExport":false,"spaMode":false,"port":3000,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":7,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-angular-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\"\n  },\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/angular-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@angular/animations\": \"22.0.6\",\n    \"@angular/common\": \"22.0.6\",\n    \"@angular/compiler\": \"22.0.6\",\n    \"@angular/core\": \"22.0.6\",\n    \"@angular/forms\": \"22.0.6\",\n    \"@angular/platform-browser\": \"22.0.6\",\n    \"@angular/platform-browser-dynamic\": \"22.0.6\",\n    \"@angular/router\": \"22.0.6\",\n    \"rxjs\": \"~7.8.2\",\n    \"tslib\": \"^2.8.1\",\n    \"zone.js\": \"~0.16.2\",\n    \"@angular-devkit/build-angular\": \"22.0.6\",\n    \"@angular/cli\": \"22.0.6\",\n    \"@angular/compiler-cli\": \"22.0.6\",\n    \"typescript\": \"~6.0.3\"\n  },\n  \"devDependencies\": {}\n}","/angular.json":"{\n  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n  \"version\": 1,\n  \"newProjectRoot\": \"projects\",\n  \"projects\": {\n    \"app\": {\n      \"projectType\": \"application\",\n      \"root\": \"\",\n      \"sourceRoot\": \"src\",\n      \"prefix\": \"app\",\n      \"architect\": {\n        \"build\": {\n          \"builder\": \"@angular-devkit/build-angular:application\",\n          \"options\": {\n            \"outputPath\": \"dist/app\",\n            \"index\": \"src/index.html\",\n            \"browser\": \"src/main.ts\",\n            \"polyfills\": [\n              \"zone.js\"\n            ],\n            \"tsConfig\": \"tsconfig.json\",\n            \"assets\": [],\n            \"styles\": [],\n            \"scripts\": []\n          },\n          \"configurations\": {\n            \"development\": {\n              \"optimization\": false,\n              \"sourceMap\": true\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        },\n        \"serve\": {\n          \"builder\": \"@angular-devkit/build-angular:dev-server\",\n          \"configurations\": {\n            \"development\": {\n              \"buildTarget\": \"app:build:development\"\n            }\n          },\n          \"defaultConfiguration\": \"development\"\n        }\n      }\n    }\n  }\n}","/tsconfig.json":"{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/out-tsc\",\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"bundler\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}","/src/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Handsontable Angular Example</title>\n  <base href=\"/\">\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div>\n    <example-installation></example-installation>\n  </div>\n</body>\n</html>","/src/main.ts":"import { bootstrapApplication } from '@angular/platform-browser';\nimport { registerAllModules } from 'handsontable/registry';\nimport { AppComponent } from './app/app.component';\nimport { appConfig } from './app/app.config';\n\nregisterAllModules();\n\nbootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));","/src/app/app.component.ts":"import { Component } from '@angular/core';\nimport { GridSettings, HotTableModule} from '@handsontable/angular-wrapper';\n\n@Component({\n  selector: 'example-installation',\n  standalone: true,\n  imports: [HotTableModule],\n  template: `<div>\n    <hot-table [data]=\"data\" [settings]=\"gridSettings\"></hot-table>\n    </div>`,\n})\nexport class AppComponent {\n\n  readonly data = [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ];\n  readonly gridSettings: GridSettings = {\n    rowHeaders: true,\n    colHeaders: ['SKU', 'Product', 'Supplier', 'Category', 'Warehouse'],\n    height: 'auto',\n    autoWrapRow: true,\n    autoWrapCol: true,\n  };\n}","/src/app/app.config.ts":"import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { registerAllModules } from 'handsontable/registry';\nimport { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';\nimport { registerLanguageDictionary, enUS } from \"handsontable/i18n\";\n\nregisterLanguageDictionary(enUS);\nregisterAllModules();\n\nconst globalHotConfig: HotGlobalConfig = {\n  license: NON_COMMERCIAL_LICENSE,\n  layoutDirection: \"ltr\",\n  language: enUS.languageCode,\n};\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    { provide: HOT_GLOBAL_CONFIG, useValue: globalHotConfig },\n  ],\n};"},"docsPath":"guides/getting-started/installation/angular/example1.ts","breadcrumb":["Getting Started","Installation"],"guide":"guides/getting-started/installation/installation.md","guideTitle":"Installation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/installation","lang":"Angular"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__javascript__example1.js.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__javascript__example1.js.json
index 26caaaea6..8c88ea378 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__javascript__example1.js.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__javascript__example1.js.json
@@ -1 +1 @@
-{"framework":"javascript","displayName":"Getting Started ▸ Installation · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\nconst data = [\n  ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],\n  ['2019', 10, 11, 12, 13],\n  ['2020', 20, 11, 14, 13],\n  ['2021', 30, 15, 12, 13],\n];\n\nnew Handsontable(container, {\n  data,\n  rowHeaders: true,\n  colHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation', // for non-commercial use only\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/installation/javascript/example1.js","breadcrumb":["Getting Started","Installation"],"guide":"guides/getting-started/installation/installation.md","guideTitle":"Installation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/installation","lang":"JavaScript"}
+{"framework":"javascript","displayName":"Getting Started ▸ Installation · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector('#example1');\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n];\n\nnew Handsontable(container, {\n  data,\n  rowHeaders: true,\n  colHeaders: ['SKU', 'Product', 'Supplier', 'Category', 'Warehouse'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation', // for non-commercial use only\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/installation/javascript/example1.js","breadcrumb":["Getting Started","Installation"],"guide":"guides/getting-started/installation/installation.md","guideTitle":"Installation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/installation","lang":"JavaScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__javascript__example1.ts.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__javascript__example1.ts.json
index a6596650d..fb1d99dfc 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__javascript__example1.ts.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__javascript__example1.ts.json
@@ -1 +1 @@
-{"framework":"typescript","displayName":"Getting Started ▸ Installation · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector<HTMLDivElement>('#example1')!;\n\nconst data: Handsontable.CellValue[][] = [\n  ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],\n  ['2019', 10, 11, 12, 13],\n  ['2020', 20, 11, 14, 13],\n  ['2021', 30, 15, 12, 13],\n];\n\nnew Handsontable(container, {\n  data,\n  rowHeaders: true,\n  colHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation', // for non-commercial use only\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/installation/javascript/example1.ts","breadcrumb":["Getting Started","Installation"],"guide":"guides/getting-started/installation/installation.md","guideTitle":"Installation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/installation","lang":"TypeScript"}
+{"framework":"typescript","displayName":"Getting Started ▸ Installation · Standard example · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vite\": \"^5.4.0\",\n    \"typescript\": \"^5.4.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Example</title>\n  <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst container = document.querySelector<HTMLDivElement>('#example1')!;\n\nconst data: Handsontable.CellValue[][] = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n];\n\nnew Handsontable(container, {\n  data,\n  rowHeaders: true,\n  colHeaders: ['SKU', 'Product', 'Supplier', 'Category', 'Warehouse'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation', // for non-commercial use only\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/getting-started/installation/javascript/example1.ts","breadcrumb":["Getting Started","Installation"],"guide":"guides/getting-started/installation/installation.md","guideTitle":"Installation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/installation","lang":"TypeScript"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__react__example1.tsx.json
index db654d473..ee9094e76 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Installation · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable, HotTableProps } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],\n  ['2019', 10, 11, 12, 13],\n  ['2020', 20, 11, 14, 13],\n  ['2021', 30, 15, 12, 13],\n];\n\nconst ExampleComponent: FC = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={true}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\" // for non-commercial use only\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/installation/react/example1.tsx","breadcrumb":["Getting Started","Installation"],"guide":"guides/getting-started/installation/installation.md","guideTitle":"Installation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/installation","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Installation · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-react-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/react-wrapper\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"react\": \"18.x\",\n    \"react-dom\": \"18.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-react\": \"^4.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable React Example</title>\n  <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { FC } from 'react';\nimport { HotTable, HotTableProps } from '@handsontable/react-wrapper';\nimport Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\nconst data = [\n  ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n  ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n  ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n  ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n  ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n];\n\nconst ExampleComponent: FC = () => {\n  return (\n    <HotTable\n      data={data}\n      rowHeaders={true}\n      colHeaders={['SKU', 'Product', 'Supplier', 'Category', 'Warehouse']}\n      height=\"auto\"\n      autoWrapRow={true}\n      autoWrapCol={true}\n      licenseKey=\"non-commercial-and-evaluation\" // for non-commercial use only\n    />\n  );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/installation/react/example1.tsx","breadcrumb":["Getting Started","Installation"],"guide":"guides/getting-started/installation/installation.md","guideTitle":"Installation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/installation","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__vue__example1.vue.json b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__vue__example1.vue.json
index f508df468..2026d4994 100644
--- a/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__vue__example1.vue.json
+++ b/runner/apps/authoring/public/docs-examples/next/guides__getting-started__installation__vue__example1.vue.json
@@ -1 +1 @@
-{"framework":"vue","displayName":"Getting Started ▸ Installation · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],\n    ['2019', 10, 11, 12, 13],\n    ['2020', 20, 11, 14, 13],\n    ['2021', 30, 15, 12, 13],\n    ['2022', 25, 20, 11, 14],\n  ],\n  rowHeaders: true,\n  colHeaders: true,\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/installation/vue/example1.vue","breadcrumb":["Getting Started","Installation"],"guide":"guides/getting-started/installation/installation.md","guideTitle":"Installation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/installation","lang":"Vue 3"}
+{"framework":"vue","displayName":"Getting Started ▸ Installation · Standard example · Vue 3","tier":2,"engine":"container","sandpackTemplate":null,"sandpackEnvironment":null,"container":"vue","htWrappers":["@handsontable/vue3"],"entry":"/src/main.ts","htmlEntry":"/index.html","devCommand":"pnpm exec vite --host 0.0.0.0 --port 5173","buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":5173,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n  \"name\": \"handsontable-vue-example\",\n  \"version\": \"1.0.0\",\n  \"private\": true,\n  \"packageManager\": \"pnpm@10.34.5\",\n  \"dependencies\": {\n    \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"@handsontable/vue3\": \"0.0.0-next-b0dc2e1-20261002\",\n    \"vue\": \"3.x\",\n    \"vite\": \"^5.4.0\",\n    \"@vitejs/plugin-vue\": \"^5.0.0\"\n  },\n  \"scripts\": {\n    \"start\": \"vite\",\n    \"build\": \"vite build\"\n  }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({ plugins: [vue()], server: { allowedHosts: true } });","/index.html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Handsontable Vue Example</title>\n</head>\n<body>\n  <div id=\"example1\"></div>\n  <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/src/main.ts":"import { createApp } from \"vue\";\nimport App from \"./App.vue\";\ncreateApp(App).mount(\"#example1\");","/src/App.vue":"<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { HotTable } from '@handsontable/vue3';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { GridSettings } from 'handsontable/settings';\n\nregisterAllModules();\n\nconst hotSettings = ref<GridSettings>({\n  data: [\n    ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n    ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n    ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n    ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n    ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n  ],\n  rowHeaders: true,\n  colHeaders: ['SKU', 'Product', 'Supplier', 'Category', 'Warehouse'],\n  height: 'auto',\n  autoWrapRow: true,\n  autoWrapCol: true,\n  licenseKey: 'non-commercial-and-evaluation',\n});\n</script>\n\n<template>\n  <div id=\"example1\">\n    <HotTable :settings=\"hotSettings\" />\n  </div>\n</template>"},"docsPath":"guides/getting-started/installation/vue/example1.vue","breadcrumb":["Getting Started","Installation"],"guide":"guides/getting-started/installation/installation.md","guideTitle":"Installation","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/installation","lang":"Vue 3"}